vue-instantsearch 4.4.0 → 4.4.1
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/CHANGELOG.md +9 -0
- package/package.json +1 -1
- package/src/components/SearchBox.vue +9 -0
- package/src/components/SearchInput.vue +3 -0
- package/src/components/__tests__/SearchBox.js +15 -0
- package/vue2/cjs/index.js +1 -1
- package/vue2/cjs/index.js.map +1 -1
- package/vue2/es/package.json.js +1 -1
- package/vue2/es/src/components/SearchBox.vue.js +1 -1
- package/vue2/es/src/components/SearchBox.vue.js.map +1 -1
- package/vue2/es/src/components/SearchInput.vue.js +1 -1
- package/vue2/es/src/components/SearchInput.vue.js.map +1 -1
- package/vue2/umd/index.js +1 -1
- package/vue2/umd/index.js.map +1 -1
- package/vue3/cjs/index.js +1 -1
- package/vue3/cjs/index.js.map +1 -1
- package/vue3/es/package.json.js +1 -1
- package/vue3/es/src/components/SearchBox.vue_vue&type=script&lang.js +1 -1
- package/vue3/es/src/components/SearchBox.vue_vue&type=script&lang.js.map +1 -1
- package/vue3/es/src/components/SearchBox.vue_vue&type=template&id=27029d83&lang.js +1 -1
- package/vue3/es/src/components/SearchBox.vue_vue&type=template&id=27029d83&lang.js.map +1 -1
- package/vue3/es/src/components/SearchInput.vue_vue&type=script&lang.js +1 -1
- package/vue3/es/src/components/SearchInput.vue_vue&type=script&lang.js.map +1 -1
- package/vue3/es/src/components/SearchInput.vue_vue&type=template&id=2eed8ffc&lang.js.map +1 -1
- package/vue3/umd/index.js +1 -1
- package/vue3/umd/index.js.map +1 -1
package/vue3/es/package.json.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var r="4.4.
|
|
1
|
+
var r="4.4.1";export{r as version};
|
|
2
2
|
//# sourceMappingURL=package.json.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{createSuitMixin as e}from"../mixins/suit.js";import{isVue2 as t,isVue3 as i}from"../util/vue-compat/index-vue3.js";import{createWidgetMixin as o}from"../mixins/widget.js";import{connectSearchBox as
|
|
1
|
+
import{createSuitMixin as e}from"../mixins/suit.js";import{isVue2 as t,isVue3 as i}from"../util/vue-compat/index-vue3.js";import{createWidgetMixin as o}from"../mixins/widget.js";import{connectSearchBox as s}from"instantsearch.js/es/connectors/index.js";import l from"./SearchInput.vue.js";export default{name:"AisSearchBox",mixins:[o({connector:s},{$$widgetType:"ais.searchBox"}),e({name:"SearchBox"})],components:{SearchInput:l},props:{placeholder:{type:String,default:"Search here…"},autofocus:{type:Boolean,default:!1},showLoadingIndicator:{type:Boolean,default:!1},submitTitle:{type:String,default:"Search"},resetTitle:{type:String,default:"Clear"},value:{type:String,default:void 0},modelValue:{type:String,default:void 0}},data:function(){return{localValue:"",isVue2:t,isVue3:i}},computed:{isControlled:function(){return void 0!==this.value||void 0!==this.modelValue},model:function(){return this.value||this.modelValue},currentRefinement:{get:function(){this.isControlled&&this.model!==this.localValue&&(this.localValue=this.model,this.$emit("input",this.model),this.$emit("update:modelValue",this.model),this.state.refine(this.model));var e=this.$refs.searchInput;return e&&e.isFocused()?this.localValue:this.model||this.state.query||""},set:function(e){this.localValue=e,this.state.refine(e),this.isControlled&&(this.$emit("input",e),this.$emit("update:modelValue",e))}}}};
|
|
2
2
|
//# sourceMappingURL=SearchBox.vue_vue&type=script&lang.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBox.vue_vue&type=script&lang.js","sources":["../../../../src/components/SearchBox.vue"],"sourcesContent":["<template>\n <div\n v-if=\"state\"\n :class=\"suit()\"\n >\n <slot\n :current-refinement=\"currentRefinement\"\n :is-search-stalled=\"state.isSearchStalled\"\n :refine=\"state.refine\"\n >\n <search-input\n @focus=\"$emit('focus', $event)\"\n @blur=\"$emit('blur', $event)\"\n @reset=\"$emit('reset')\"\n :placeholder=\"placeholder\"\n :autofocus=\"autofocus\"\n :show-loading-indicator=\"showLoadingIndicator\"\n :should-show-loading-indicator=\"state.isSearchStalled\"\n :submit-title=\"submitTitle\"\n :reset-title=\"resetTitle\"\n :class-names=\"classNames\"\n v-model=\"currentRefinement\"\n >\n <template\n v-slot:loading-indicator\n v-if=\"isVue3\"\n >\n <slot\n name=\"loading-indicator\"\n />\n </template>\n <slot\n v-if=\"isVue2\"\n name=\"loading-indicator\"\n slot=\"loading-indicator\"\n />\n\n <template\n v-slot:submit-icon\n v-if=\"isVue3\"\n >\n <slot\n name=\"submit-icon\"\n />\n </template>\n <slot\n v-if=\"isVue2\"\n name=\"submit-icon\"\n slot=\"submit-icon\"\n />\n\n <template\n v-slot:reset-icon\n v-if=\"isVue3\"\n >\n <slot\n name=\"reset-icon\"\n />\n </template>\n <slot\n v-if=\"isVue2\"\n name=\"reset-icon\"\n slot=\"reset-icon\"\n />\n </search-input>\n </slot>\n </div>\n</template>\n\n<script>\nimport { connectSearchBox } from 'instantsearch.js/es/connectors';\nimport { createSuitMixin } from '../mixins/suit';\nimport { createWidgetMixin } from '../mixins/widget';\nimport { isVue3, isVue2 } from '../util/vue-compat';\nimport SearchInput from './SearchInput.vue';\n\nexport default {\n name: 'AisSearchBox',\n mixins: [\n createWidgetMixin(\n {\n connector: connectSearchBox,\n },\n {\n $$widgetType: 'ais.searchBox',\n }\n ),\n createSuitMixin({ name: 'SearchBox' }),\n ],\n components: {\n SearchInput,\n },\n props: {\n placeholder: {\n type: String,\n default: 'Search here…',\n },\n autofocus: {\n type: Boolean,\n default: false,\n },\n showLoadingIndicator: {\n type: Boolean,\n default: false,\n },\n submitTitle: {\n type: String,\n default: 'Search',\n },\n resetTitle: {\n type: String,\n default: 'Clear',\n },\n value: {\n type: String,\n default: undefined,\n },\n modelValue: {\n type: String,\n default: undefined,\n },\n },\n data() {\n return {\n localValue: '',\n isVue2,\n isVue3,\n };\n },\n computed: {\n isControlled() {\n return (\n typeof this.value !== 'undefined' ||\n typeof this.modelValue !== 'undefined'\n );\n },\n model() {\n return this.value || this.modelValue;\n },\n currentRefinement: {\n get() {\n // if the input is controlled, but not up to date\n // this means it didn't search, and we should pretend it was `set`\n if (this.isControlled && this.model !== this.localValue) {\n // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n this.localValue = this.model;\n this.$emit('input', this.model);\n this.$emit('update:modelValue', this.model);\n this.state.refine(this.model);\n }\n return this.model || this.state.query || '';\n },\n set(val) {\n this.localValue = val;\n this.state.refine(val);\n if (this.isControlled) {\n this.$emit('input', val);\n this.$emit('update:modelValue', val);\n }\n },\n },\n },\n};\n</script>\n"],"names":["name","mixins","createWidgetMixin","connector","connectSearchBox","$$widgetType","createSuitMixin","components","SearchInput","props","placeholder","type","String","default","autofocus","Boolean","showLoadingIndicator","submitTitle","resetTitle","value","undefined","modelValue","data","localValue","isVue2","isVue3","computed","isControlled","this","model","currentRefinement","get","$emit","state","refine","query","set","val"],"mappings":"+
|
|
1
|
+
{"version":3,"file":"SearchBox.vue_vue&type=script&lang.js","sources":["../../../../src/components/SearchBox.vue"],"sourcesContent":["<template>\n <div\n v-if=\"state\"\n :class=\"suit()\"\n >\n <slot\n :current-refinement=\"currentRefinement\"\n :is-search-stalled=\"state.isSearchStalled\"\n :refine=\"state.refine\"\n >\n <search-input\n @focus=\"$emit('focus', $event)\"\n @blur=\"$emit('blur', $event)\"\n @reset=\"$emit('reset')\"\n :placeholder=\"placeholder\"\n :autofocus=\"autofocus\"\n :show-loading-indicator=\"showLoadingIndicator\"\n :should-show-loading-indicator=\"state.isSearchStalled\"\n :submit-title=\"submitTitle\"\n :reset-title=\"resetTitle\"\n :class-names=\"classNames\"\n v-model=\"currentRefinement\"\n ref=\"searchInput\"\n >\n <template\n v-slot:loading-indicator\n v-if=\"isVue3\"\n >\n <slot\n name=\"loading-indicator\"\n />\n </template>\n <slot\n v-if=\"isVue2\"\n name=\"loading-indicator\"\n slot=\"loading-indicator\"\n />\n\n <template\n v-slot:submit-icon\n v-if=\"isVue3\"\n >\n <slot\n name=\"submit-icon\"\n />\n </template>\n <slot\n v-if=\"isVue2\"\n name=\"submit-icon\"\n slot=\"submit-icon\"\n />\n\n <template\n v-slot:reset-icon\n v-if=\"isVue3\"\n >\n <slot\n name=\"reset-icon\"\n />\n </template>\n <slot\n v-if=\"isVue2\"\n name=\"reset-icon\"\n slot=\"reset-icon\"\n />\n </search-input>\n </slot>\n </div>\n</template>\n\n<script>\nimport { connectSearchBox } from 'instantsearch.js/es/connectors';\nimport { createSuitMixin } from '../mixins/suit';\nimport { createWidgetMixin } from '../mixins/widget';\nimport { isVue3, isVue2 } from '../util/vue-compat';\nimport SearchInput from './SearchInput.vue';\n\nexport default {\n name: 'AisSearchBox',\n mixins: [\n createWidgetMixin(\n {\n connector: connectSearchBox,\n },\n {\n $$widgetType: 'ais.searchBox',\n }\n ),\n createSuitMixin({ name: 'SearchBox' }),\n ],\n components: {\n SearchInput,\n },\n props: {\n placeholder: {\n type: String,\n default: 'Search here…',\n },\n autofocus: {\n type: Boolean,\n default: false,\n },\n showLoadingIndicator: {\n type: Boolean,\n default: false,\n },\n submitTitle: {\n type: String,\n default: 'Search',\n },\n resetTitle: {\n type: String,\n default: 'Clear',\n },\n value: {\n type: String,\n default: undefined,\n },\n modelValue: {\n type: String,\n default: undefined,\n },\n },\n data() {\n return {\n localValue: '',\n isVue2,\n isVue3,\n };\n },\n computed: {\n isControlled() {\n return (\n typeof this.value !== 'undefined' ||\n typeof this.modelValue !== 'undefined'\n );\n },\n model() {\n return this.value || this.modelValue;\n },\n currentRefinement: {\n get() {\n // if the input is controlled, but not up to date\n // this means it didn't search, and we should pretend it was `set`\n if (this.isControlled && this.model !== this.localValue) {\n // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n this.localValue = this.model;\n this.$emit('input', this.model);\n this.$emit('update:modelValue', this.model);\n this.state.refine(this.model);\n }\n\n // we return the local value if the input is focused to avoid\n // concurrent updates when typing\n const { searchInput } = this.$refs;\n if (searchInput && searchInput.isFocused()) {\n return this.localValue;\n }\n\n return this.model || this.state.query || '';\n },\n set(val) {\n this.localValue = val;\n this.state.refine(val);\n if (this.isControlled) {\n this.$emit('input', val);\n this.$emit('update:modelValue', val);\n }\n },\n },\n },\n};\n</script>\n"],"names":["name","mixins","createWidgetMixin","connector","connectSearchBox","$$widgetType","createSuitMixin","components","SearchInput","props","placeholder","type","String","default","autofocus","Boolean","showLoadingIndicator","submitTitle","resetTitle","value","undefined","modelValue","data","localValue","isVue2","isVue3","computed","isControlled","this","model","currentRefinement","get","$emit","state","refine","$refs","searchInput","isFocused","query","set","val"],"mappings":"+SA6Ee,CACbA,KAAM,eACNC,OAAQ,CACNC,EACE,CACEC,UAAWC,GAEb,CACEC,aAAc,kBAGlBC,EAAgB,CAAEN,KAAM,eAE1BO,WAAY,aACVC,GAEFC,MAAO,CACLC,YAAa,CACXC,KAAMC,OACNC,QAAS,gBAEXC,UAAW,CACTH,KAAMI,QACNF,SAAS,GAEXG,qBAAsB,CACpBL,KAAMI,QACNF,SAAS,GAEXI,YAAa,CACXN,KAAMC,OACNC,QAAS,UAEXK,WAAY,CACVP,KAAMC,OACNC,QAAS,SAEXM,MAAO,CACLR,KAAMC,OACNC,aAASO,GAEXC,WAAY,CACVV,KAAMC,OACNC,aAASO,IAGbE,sBACS,CACLC,WAAY,UACZC,SACAC,IAGJC,SAAU,CACRC,oCAE0B,IAAfC,KAAKT,YACe,IAApBS,KAAKP,YAGhBQ,wBACSD,KAAKT,OAASS,KAAKP,YAE5BS,kBAAmB,CACjBC,eAGMH,KAAKD,cAAgBC,KAAKC,QAAUD,KAAKL,kBAEtCA,WAAaK,KAAKC,WAClBG,MAAM,QAASJ,KAAKC,YACpBG,MAAM,oBAAqBJ,KAAKC,YAChCI,MAAMC,OAAON,KAAKC,cAKDD,KAAKO,yBACzBC,GAAeA,EAAYC,YACtBT,KAAKL,WAGPK,KAAKC,OAASD,KAAKK,MAAMK,OAAS,IAE3CC,aAAIC,QACGjB,WAAaiB,OACbP,MAAMC,OAAOM,GACdZ,KAAKD,oBACFK,MAAM,QAASQ,QACfR,MAAM,oBAAqBQ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{resolveComponent as e,openBlock as t,createBlock as i,renderSlot as n,createVNode as o,createSlots as s,withCtx as r,createCommentVNode as u}from"vue";function a(a,l,c,d,f,m){var h=e("search-input");return a.state?(t(),i("div",{key:0,class:a.suit()},[n(a.$slots,"default",{currentRefinement:m.currentRefinement,isSearchStalled:a.state.isSearchStalled,refine:a.state.refine},function(){return[o(h,{onFocus:l[1]||(l[1]=function(e){return a.$emit("focus",e)}),onBlur:l[2]||(l[2]=function(e){return a.$emit("blur",e)}),onReset:l[3]||(l[3]=function(e){return a.$emit("reset")}),placeholder:c.placeholder,autofocus:c.autofocus,"show-loading-indicator":c.showLoadingIndicator,"should-show-loading-indicator":a.state.isSearchStalled,"submit-title":c.submitTitle,"reset-title":c.resetTitle,"class-names":a.classNames,modelValue:m.currentRefinement,"onUpdate:modelValue":l[4]||(l[4]=function(e){return m.currentRefinement=e})},s({default:r(function(){return[f.isVue2?n(a.$slots,"loading-indicator",{key:0,slot:"loading-indicator"}):u("v-if",!0),f.isVue2?n(a.$slots,"submit-icon",{key:1,slot:"submit-icon"}):u("v-if",!0),f.isVue2?n(a.$slots,"reset-icon",{key:2,slot:"reset-icon"}):u("v-if",!0)]}),_:2},[f.isVue3?{name:"loading-indicator",fn:r(function(){return[n(a.$slots,"loading-indicator")]})}:void 0,f.isVue3?{name:"submit-icon",fn:r(function(){return[n(a.$slots,"submit-icon")]})}:void 0,f.isVue3?{name:"reset-icon",fn:r(function(){return[n(a.$slots,"reset-icon")]})}:void 0]),1032,["placeholder","autofocus","show-loading-indicator","should-show-loading-indicator","submit-title","reset-title","class-names","modelValue"])]})],2)):u("v-if",!0)}export{a as render};
|
|
1
|
+
import{resolveComponent as e,openBlock as t,createBlock as i,renderSlot as n,createVNode as o,createSlots as s,withCtx as r,createCommentVNode as u}from"vue";function a(a,l,c,d,f,m){var h=e("search-input");return a.state?(t(),i("div",{key:0,class:a.suit()},[n(a.$slots,"default",{currentRefinement:m.currentRefinement,isSearchStalled:a.state.isSearchStalled,refine:a.state.refine},function(){return[o(h,{onFocus:l[1]||(l[1]=function(e){return a.$emit("focus",e)}),onBlur:l[2]||(l[2]=function(e){return a.$emit("blur",e)}),onReset:l[3]||(l[3]=function(e){return a.$emit("reset")}),placeholder:c.placeholder,autofocus:c.autofocus,"show-loading-indicator":c.showLoadingIndicator,"should-show-loading-indicator":a.state.isSearchStalled,"submit-title":c.submitTitle,"reset-title":c.resetTitle,"class-names":a.classNames,modelValue:m.currentRefinement,"onUpdate:modelValue":l[4]||(l[4]=function(e){return m.currentRefinement=e}),ref:"searchInput"},s({default:r(function(){return[f.isVue2?n(a.$slots,"loading-indicator",{key:0,slot:"loading-indicator"}):u("v-if",!0),f.isVue2?n(a.$slots,"submit-icon",{key:1,slot:"submit-icon"}):u("v-if",!0),f.isVue2?n(a.$slots,"reset-icon",{key:2,slot:"reset-icon"}):u("v-if",!0)]}),_:2},[f.isVue3?{name:"loading-indicator",fn:r(function(){return[n(a.$slots,"loading-indicator")]})}:void 0,f.isVue3?{name:"submit-icon",fn:r(function(){return[n(a.$slots,"submit-icon")]})}:void 0,f.isVue3?{name:"reset-icon",fn:r(function(){return[n(a.$slots,"reset-icon")]})}:void 0]),1032,["placeholder","autofocus","show-loading-indicator","should-show-loading-indicator","submit-title","reset-title","class-names","modelValue"])]})],2)):u("v-if",!0)}export{a as render};
|
|
2
2
|
//# sourceMappingURL=SearchBox.vue_vue&type=template&id=27029d83&lang.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBox.vue_vue&type=template&id=27029d83&lang.js","sources":["../../../../src/components/SearchBox.vue?vue&type=template&id=27029d83&lang.js"],"sourcesContent":["<template>\n <div\n v-if=\"state\"\n :class=\"suit()\"\n >\n <slot\n :current-refinement=\"currentRefinement\"\n :is-search-stalled=\"state.isSearchStalled\"\n :refine=\"state.refine\"\n >\n <search-input\n @focus=\"$emit('focus', $event)\"\n @blur=\"$emit('blur', $event)\"\n @reset=\"$emit('reset')\"\n :placeholder=\"placeholder\"\n :autofocus=\"autofocus\"\n :show-loading-indicator=\"showLoadingIndicator\"\n :should-show-loading-indicator=\"state.isSearchStalled\"\n :submit-title=\"submitTitle\"\n :reset-title=\"resetTitle\"\n :class-names=\"classNames\"\n v-model=\"currentRefinement\"\n >\n <template\n v-slot:loading-indicator\n v-if=\"isVue3\"\n >\n <slot\n name=\"loading-indicator\"\n />\n </template>\n <slot\n v-if=\"isVue2\"\n name=\"loading-indicator\"\n slot=\"loading-indicator\"\n />\n\n <template\n v-slot:submit-icon\n v-if=\"isVue3\"\n >\n <slot\n name=\"submit-icon\"\n />\n </template>\n <slot\n v-if=\"isVue2\"\n name=\"submit-icon\"\n slot=\"submit-icon\"\n />\n\n <template\n v-slot:reset-icon\n v-if=\"isVue3\"\n >\n <slot\n name=\"reset-icon\"\n />\n </template>\n <slot\n v-if=\"isVue2\"\n name=\"reset-icon\"\n slot=\"reset-icon\"\n />\n </search-input>\n </slot>\n </div>\n</template>\n\n<script>\nimport { connectSearchBox } from 'instantsearch.js/es/connectors';\nimport { createSuitMixin } from '../mixins/suit';\nimport { createWidgetMixin } from '../mixins/widget';\nimport { isVue3, isVue2 } from '../util/vue-compat';\nimport SearchInput from './SearchInput.vue';\n\nexport default {\n name: 'AisSearchBox',\n mixins: [\n createWidgetMixin(\n {\n connector: connectSearchBox,\n },\n {\n $$widgetType: 'ais.searchBox',\n }\n ),\n createSuitMixin({ name: 'SearchBox' }),\n ],\n components: {\n SearchInput,\n },\n props: {\n placeholder: {\n type: String,\n default: 'Search here…',\n },\n autofocus: {\n type: Boolean,\n default: false,\n },\n showLoadingIndicator: {\n type: Boolean,\n default: false,\n },\n submitTitle: {\n type: String,\n default: 'Search',\n },\n resetTitle: {\n type: String,\n default: 'Clear',\n },\n value: {\n type: String,\n default: undefined,\n },\n modelValue: {\n type: String,\n default: undefined,\n },\n },\n data() {\n return {\n localValue: '',\n isVue2,\n isVue3,\n };\n },\n computed: {\n isControlled() {\n return (\n typeof this.value !== 'undefined' ||\n typeof this.modelValue !== 'undefined'\n );\n },\n model() {\n return this.value || this.modelValue;\n },\n currentRefinement: {\n get() {\n // if the input is controlled, but not up to date\n // this means it didn't search, and we should pretend it was `set`\n if (this.isControlled && this.model !== this.localValue) {\n // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n this.localValue = this.model;\n this.$emit('input', this.model);\n this.$emit('update:modelValue', this.model);\n this.state.refine(this.model);\n }\n return this.model || this.state.query || '';\n },\n set(val) {\n this.localValue = val;\n this.state.refine(val);\n if (this.isControlled) {\n this.$emit('input', val);\n this.$emit('update:modelValue', val);\n }\n },\n },\n },\n};\n</script>\n"],"names":["_ctx","_createBlock","class","_renderSlot","currentRefinement","$options","isSearchStalled","refine","_createVNode","onFocus","$event","onBlur","onReset","placeholder","$props","autofocus","$data","slot"],"mappings":"qNAEUA,aADRC,eAEGC,MAAOF,WAERG,sBACGC,kBAAoBC,oBACpBC,gBAAmBN,QAAMM,gBACzBC,OAAQP,QAAMO,0BAEfC,KACGC,uCAAOT,gBAAeU,KACtBC,sCAAMX,eAAcU,KACpBE,uCAAOZ,mBACPa,YAAaC,cACbC,UAAWD,qCACaA,uDACOd,QAAMM,+BACvBQ,4BACDA,2BACAd,wBACLK,yEAAAA,
|
|
1
|
+
{"version":3,"file":"SearchBox.vue_vue&type=template&id=27029d83&lang.js","sources":["../../../../src/components/SearchBox.vue?vue&type=template&id=27029d83&lang.js"],"sourcesContent":["<template>\n <div\n v-if=\"state\"\n :class=\"suit()\"\n >\n <slot\n :current-refinement=\"currentRefinement\"\n :is-search-stalled=\"state.isSearchStalled\"\n :refine=\"state.refine\"\n >\n <search-input\n @focus=\"$emit('focus', $event)\"\n @blur=\"$emit('blur', $event)\"\n @reset=\"$emit('reset')\"\n :placeholder=\"placeholder\"\n :autofocus=\"autofocus\"\n :show-loading-indicator=\"showLoadingIndicator\"\n :should-show-loading-indicator=\"state.isSearchStalled\"\n :submit-title=\"submitTitle\"\n :reset-title=\"resetTitle\"\n :class-names=\"classNames\"\n v-model=\"currentRefinement\"\n ref=\"searchInput\"\n >\n <template\n v-slot:loading-indicator\n v-if=\"isVue3\"\n >\n <slot\n name=\"loading-indicator\"\n />\n </template>\n <slot\n v-if=\"isVue2\"\n name=\"loading-indicator\"\n slot=\"loading-indicator\"\n />\n\n <template\n v-slot:submit-icon\n v-if=\"isVue3\"\n >\n <slot\n name=\"submit-icon\"\n />\n </template>\n <slot\n v-if=\"isVue2\"\n name=\"submit-icon\"\n slot=\"submit-icon\"\n />\n\n <template\n v-slot:reset-icon\n v-if=\"isVue3\"\n >\n <slot\n name=\"reset-icon\"\n />\n </template>\n <slot\n v-if=\"isVue2\"\n name=\"reset-icon\"\n slot=\"reset-icon\"\n />\n </search-input>\n </slot>\n </div>\n</template>\n\n<script>\nimport { connectSearchBox } from 'instantsearch.js/es/connectors';\nimport { createSuitMixin } from '../mixins/suit';\nimport { createWidgetMixin } from '../mixins/widget';\nimport { isVue3, isVue2 } from '../util/vue-compat';\nimport SearchInput from './SearchInput.vue';\n\nexport default {\n name: 'AisSearchBox',\n mixins: [\n createWidgetMixin(\n {\n connector: connectSearchBox,\n },\n {\n $$widgetType: 'ais.searchBox',\n }\n ),\n createSuitMixin({ name: 'SearchBox' }),\n ],\n components: {\n SearchInput,\n },\n props: {\n placeholder: {\n type: String,\n default: 'Search here…',\n },\n autofocus: {\n type: Boolean,\n default: false,\n },\n showLoadingIndicator: {\n type: Boolean,\n default: false,\n },\n submitTitle: {\n type: String,\n default: 'Search',\n },\n resetTitle: {\n type: String,\n default: 'Clear',\n },\n value: {\n type: String,\n default: undefined,\n },\n modelValue: {\n type: String,\n default: undefined,\n },\n },\n data() {\n return {\n localValue: '',\n isVue2,\n isVue3,\n };\n },\n computed: {\n isControlled() {\n return (\n typeof this.value !== 'undefined' ||\n typeof this.modelValue !== 'undefined'\n );\n },\n model() {\n return this.value || this.modelValue;\n },\n currentRefinement: {\n get() {\n // if the input is controlled, but not up to date\n // this means it didn't search, and we should pretend it was `set`\n if (this.isControlled && this.model !== this.localValue) {\n // eslint-disable-next-line vue/no-side-effects-in-computed-properties\n this.localValue = this.model;\n this.$emit('input', this.model);\n this.$emit('update:modelValue', this.model);\n this.state.refine(this.model);\n }\n\n // we return the local value if the input is focused to avoid\n // concurrent updates when typing\n const { searchInput } = this.$refs;\n if (searchInput && searchInput.isFocused()) {\n return this.localValue;\n }\n\n return this.model || this.state.query || '';\n },\n set(val) {\n this.localValue = val;\n this.state.refine(val);\n if (this.isControlled) {\n this.$emit('input', val);\n this.$emit('update:modelValue', val);\n }\n },\n },\n },\n};\n</script>\n"],"names":["_ctx","_createBlock","class","_renderSlot","currentRefinement","$options","isSearchStalled","refine","_createVNode","onFocus","$event","onBlur","onReset","placeholder","$props","autofocus","ref","$data","slot"],"mappings":"qNAEUA,aADRC,eAEGC,MAAOF,WAERG,sBACGC,kBAAoBC,oBACpBC,gBAAmBN,QAAMM,gBACzBC,OAAQP,QAAMO,0BAEfC,KACGC,uCAAOT,gBAAeU,KACtBC,sCAAMX,eAAcU,KACpBE,uCAAOZ,mBACPa,YAAaC,cACbC,UAAWD,qCACaA,uDACOd,QAAMM,+BACvBQ,4BACDA,2BACAd,wBACLK,yEAAAA,wBACTW,IAAI,8CAWIC,SADRd,sCAGEe,KAAK,mCAYCD,SADRd,gCAGEe,KAAK,6BAYCD,SADRd,+BAGEe,KAAK,qCArCCD,eADC,2CAGPd,2CAYMc,eADC,qCAGPd,qCAYMc,eADC,oCAGPd"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{createSuitMixin as e}from"../mixins/suit.js";export default{name:"SearchInput",mixins:[e({name:"SearchBox"})],props:{placeholder:{type:String,default:"Search here…"},autofocus:{type:Boolean,default:!1},showLoadingIndicator:{type:Boolean,default:!1},shouldShowLoadingIndicator:{type:Boolean,default:!1},submitTitle:{type:String,default:"Search"},resetTitle:{type:String,default:"Clear"},value:{type:String,required:!1,default:void 0},modelValue:{type:String,required:!1,default:void 0}},emits:["input","update:modelValue","blur","focus","reset"],data:function(){return{query:""}},methods:{onFormSubmit:function(){this.$refs.input.blur()},onFormReset:function(){this.$emit("input",""),this.$emit("update:modelValue",""),this.$emit("reset")}}};
|
|
1
|
+
import{createSuitMixin as e}from"../mixins/suit.js";export default{name:"SearchInput",mixins:[e({name:"SearchBox"})],props:{placeholder:{type:String,default:"Search here…"},autofocus:{type:Boolean,default:!1},showLoadingIndicator:{type:Boolean,default:!1},shouldShowLoadingIndicator:{type:Boolean,default:!1},submitTitle:{type:String,default:"Search"},resetTitle:{type:String,default:"Clear"},value:{type:String,required:!1,default:void 0},modelValue:{type:String,required:!1,default:void 0}},emits:["input","update:modelValue","blur","focus","reset"],data:function(){return{query:""}},methods:{isFocused:function(){return document.activeElement===this.$refs.input},onFormSubmit:function(){this.$refs.input.blur()},onFormReset:function(){this.$emit("input",""),this.$emit("update:modelValue",""),this.$emit("reset")}}};
|
|
2
2
|
//# sourceMappingURL=SearchInput.vue_vue&type=script&lang.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.vue_vue&type=script&lang.js","sources":["../../../../src/components/SearchInput.vue"],"sourcesContent":["<template>\n <form\n action=\"\"\n role=\"search\"\n novalidate\n :class=\"suit('form')\"\n @submit.prevent=\"onFormSubmit\"\n @reset.prevent=\"onFormReset\"\n >\n <!-- :value/@input allows us to pass v-model to the component in v2 -->\n <!-- :modelValue/@update:modelValue allows us to pass v-model to the component in v3 -->\n <input\n type=\"search\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n required\n maxlength=\"512\"\n aria-label=\"Search\"\n :placeholder=\"placeholder\"\n :autofocus=\"autofocus\"\n :class=\"suit('input')\"\n :value=\"value || modelValue\"\n @focus=\"$emit('focus', $event)\"\n @blur=\"$emit('blur', $event)\"\n @input=\"$emit('input', $event.target.value); $emit('update:modelValue', $event.target.value)\"\n ref=\"input\"\n >\n <button\n type=\"submit\"\n :title=\"submitTitle\"\n :class=\"suit('submit')\"\n :hidden=\"showLoadingIndicator && shouldShowLoadingIndicator\"\n >\n <slot name=\"submit-icon\">\n <svg\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"10\"\n height=\"10\"\n viewBox=\"0 0 40 40\"\n :class=\"suit('submitIcon')\"\n >\n <path\n d=\"M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z\"\n fillRule=\"evenodd\"\n />\n </svg>\n </slot>\n </button>\n\n <button\n type=\"reset\"\n :title=\"resetTitle\"\n :class=\"suit('reset')\"\n :hidden=\"(!value && !modelValue) || (showLoadingIndicator && shouldShowLoadingIndicator)\"\n >\n <slot name=\"reset-icon\">\n <svg\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 20 20\"\n :class=\"suit('resetIcon')\"\n >\n <path\n d=\"M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z\"\n fillRule=\"evenodd\"\n />\n </svg>\n </slot>\n </button>\n\n <span\n v-if=\"showLoadingIndicator\"\n :hidden=\"!shouldShowLoadingIndicator\"\n :class=\"suit('loadingIndicator')\"\n >\n <slot name=\"loading-indicator\">\n <svg\n role=\"img\"\n aria-label=\"Results are loading\"\n width=\"16\"\n height=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n stroke=\"#444\"\n viewBox=\"0 0 38 38\"\n :class=\"suit('loadingIcon')\"\n >\n <g\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <g\n transform=\"translate(1 1)\"\n stroke-width=\"2\"\n >\n <circle\n stroke-opacity=\".5\"\n cx=\"18\"\n cy=\"18\"\n r=\"18\"\n />\n <path d=\"M36 18c0-9.94-8.06-18-18-18\">\n <animateTransform\n attributeName=\"transform\"\n type=\"rotate\"\n from=\"0 18 18\"\n to=\"360 18 18\"\n dur=\"1s\"\n repeatCount=\"indefinite\"\n />\n </path>\n </g>\n </g>\n </svg>\n </slot>\n </span>\n </form>\n</template>\n\n<script>\nimport { createSuitMixin } from '../mixins/suit';\n\nexport default {\n name: 'SearchInput',\n mixins: [createSuitMixin({ name: 'SearchBox' })],\n props: {\n placeholder: {\n type: String,\n default: 'Search here…',\n },\n autofocus: {\n type: Boolean,\n default: false,\n },\n showLoadingIndicator: {\n type: Boolean,\n default: false,\n },\n shouldShowLoadingIndicator: {\n type: Boolean,\n default: false,\n },\n submitTitle: {\n type: String,\n default: 'Search',\n },\n resetTitle: {\n type: String,\n default: 'Clear',\n },\n value: {\n type: String,\n required: false,\n default: undefined,\n },\n modelValue: {\n type: String,\n required: false,\n default: undefined,\n },\n },\n emits: ['input', 'update:modelValue', 'blur', 'focus', 'reset'],\n data() {\n return {\n query: '',\n };\n },\n methods: {\n onFormSubmit() {\n const input = this.$refs.input;\n input.blur();\n },\n onFormReset() {\n this.$emit('input', '');\n this.$emit('update:modelValue', '');\n this.$emit('reset');\n },\n },\n};\n</script>\n"],"names":["name","mixins","createSuitMixin","props","placeholder","type","String","default","autofocus","Boolean","showLoadingIndicator","shouldShowLoadingIndicator","submitTitle","resetTitle","value","required","undefined","modelValue","emits","data","query","methods","
|
|
1
|
+
{"version":3,"file":"SearchInput.vue_vue&type=script&lang.js","sources":["../../../../src/components/SearchInput.vue"],"sourcesContent":["<template>\n <form\n action=\"\"\n role=\"search\"\n novalidate\n :class=\"suit('form')\"\n @submit.prevent=\"onFormSubmit\"\n @reset.prevent=\"onFormReset\"\n >\n <!-- :value/@input allows us to pass v-model to the component in v2 -->\n <!-- :modelValue/@update:modelValue allows us to pass v-model to the component in v3 -->\n <input\n type=\"search\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n required\n maxlength=\"512\"\n aria-label=\"Search\"\n :placeholder=\"placeholder\"\n :autofocus=\"autofocus\"\n :class=\"suit('input')\"\n :value=\"value || modelValue\"\n @focus=\"$emit('focus', $event)\"\n @blur=\"$emit('blur', $event)\"\n @input=\"$emit('input', $event.target.value); $emit('update:modelValue', $event.target.value)\"\n ref=\"input\"\n >\n <button\n type=\"submit\"\n :title=\"submitTitle\"\n :class=\"suit('submit')\"\n :hidden=\"showLoadingIndicator && shouldShowLoadingIndicator\"\n >\n <slot name=\"submit-icon\">\n <svg\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"10\"\n height=\"10\"\n viewBox=\"0 0 40 40\"\n :class=\"suit('submitIcon')\"\n >\n <path\n d=\"M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z\"\n fillRule=\"evenodd\"\n />\n </svg>\n </slot>\n </button>\n\n <button\n type=\"reset\"\n :title=\"resetTitle\"\n :class=\"suit('reset')\"\n :hidden=\"(!value && !modelValue) || (showLoadingIndicator && shouldShowLoadingIndicator)\"\n >\n <slot name=\"reset-icon\">\n <svg\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 20 20\"\n :class=\"suit('resetIcon')\"\n >\n <path\n d=\"M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z\"\n fillRule=\"evenodd\"\n />\n </svg>\n </slot>\n </button>\n\n <span\n v-if=\"showLoadingIndicator\"\n :hidden=\"!shouldShowLoadingIndicator\"\n :class=\"suit('loadingIndicator')\"\n >\n <slot name=\"loading-indicator\">\n <svg\n role=\"img\"\n aria-label=\"Results are loading\"\n width=\"16\"\n height=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n stroke=\"#444\"\n viewBox=\"0 0 38 38\"\n :class=\"suit('loadingIcon')\"\n >\n <g\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <g\n transform=\"translate(1 1)\"\n stroke-width=\"2\"\n >\n <circle\n stroke-opacity=\".5\"\n cx=\"18\"\n cy=\"18\"\n r=\"18\"\n />\n <path d=\"M36 18c0-9.94-8.06-18-18-18\">\n <animateTransform\n attributeName=\"transform\"\n type=\"rotate\"\n from=\"0 18 18\"\n to=\"360 18 18\"\n dur=\"1s\"\n repeatCount=\"indefinite\"\n />\n </path>\n </g>\n </g>\n </svg>\n </slot>\n </span>\n </form>\n</template>\n\n<script>\nimport { createSuitMixin } from '../mixins/suit';\n\nexport default {\n name: 'SearchInput',\n mixins: [createSuitMixin({ name: 'SearchBox' })],\n props: {\n placeholder: {\n type: String,\n default: 'Search here…',\n },\n autofocus: {\n type: Boolean,\n default: false,\n },\n showLoadingIndicator: {\n type: Boolean,\n default: false,\n },\n shouldShowLoadingIndicator: {\n type: Boolean,\n default: false,\n },\n submitTitle: {\n type: String,\n default: 'Search',\n },\n resetTitle: {\n type: String,\n default: 'Clear',\n },\n value: {\n type: String,\n required: false,\n default: undefined,\n },\n modelValue: {\n type: String,\n required: false,\n default: undefined,\n },\n },\n emits: ['input', 'update:modelValue', 'blur', 'focus', 'reset'],\n data() {\n return {\n query: '',\n };\n },\n methods: {\n isFocused() {\n return document.activeElement === this.$refs.input;\n },\n onFormSubmit() {\n const input = this.$refs.input;\n input.blur();\n },\n onFormReset() {\n this.$emit('input', '');\n this.$emit('update:modelValue', '');\n this.$emit('reset');\n },\n },\n};\n</script>\n"],"names":["name","mixins","createSuitMixin","props","placeholder","type","String","default","autofocus","Boolean","showLoadingIndicator","shouldShowLoadingIndicator","submitTitle","resetTitle","value","required","undefined","modelValue","emits","data","query","methods","isFocused","document","activeElement","this","$refs","input","onFormSubmit","blur","onFormReset","$emit"],"mappings":"kEA8He,CACbA,KAAM,cACNC,OAAQ,CAACC,EAAgB,CAAEF,KAAM,eACjCG,MAAO,CACLC,YAAa,CACXC,KAAMC,OACNC,QAAS,gBAEXC,UAAW,CACTH,KAAMI,QACNF,SAAS,GAEXG,qBAAsB,CACpBL,KAAMI,QACNF,SAAS,GAEXI,2BAA4B,CAC1BN,KAAMI,QACNF,SAAS,GAEXK,YAAa,CACXP,KAAMC,OACNC,QAAS,UAEXM,WAAY,CACVR,KAAMC,OACNC,QAAS,SAEXO,MAAO,CACLT,KAAMC,OACNS,UAAU,EACVR,aAASS,GAEXC,WAAY,CACVZ,KAAMC,OACNS,UAAU,EACVR,aAASS,IAGbE,MAAO,CAAC,QAAS,oBAAqB,OAAQ,QAAS,SACvDC,sBACS,CACLC,MAAO,KAGXC,QAAS,CACPC,4BACSC,SAASC,gBAAkBC,KAAKC,MAAMC,OAE/CC,wBACgBH,KAAKC,MAAMC,MACnBE,QAERC,4BACOC,MAAM,QAAS,SACfA,MAAM,oBAAqB,SAC3BA,MAAM"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.vue_vue&type=template&id=2eed8ffc&lang.js","sources":["../../../../src/components/SearchInput.vue?vue&type=template&id=2eed8ffc&lang.js"],"sourcesContent":["<template>\n <form\n action=\"\"\n role=\"search\"\n novalidate\n :class=\"suit('form')\"\n @submit.prevent=\"onFormSubmit\"\n @reset.prevent=\"onFormReset\"\n >\n <!-- :value/@input allows us to pass v-model to the component in v2 -->\n <!-- :modelValue/@update:modelValue allows us to pass v-model to the component in v3 -->\n <input\n type=\"search\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n required\n maxlength=\"512\"\n aria-label=\"Search\"\n :placeholder=\"placeholder\"\n :autofocus=\"autofocus\"\n :class=\"suit('input')\"\n :value=\"value || modelValue\"\n @focus=\"$emit('focus', $event)\"\n @blur=\"$emit('blur', $event)\"\n @input=\"$emit('input', $event.target.value); $emit('update:modelValue', $event.target.value)\"\n ref=\"input\"\n >\n <button\n type=\"submit\"\n :title=\"submitTitle\"\n :class=\"suit('submit')\"\n :hidden=\"showLoadingIndicator && shouldShowLoadingIndicator\"\n >\n <slot name=\"submit-icon\">\n <svg\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"10\"\n height=\"10\"\n viewBox=\"0 0 40 40\"\n :class=\"suit('submitIcon')\"\n >\n <path\n d=\"M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z\"\n fillRule=\"evenodd\"\n />\n </svg>\n </slot>\n </button>\n\n <button\n type=\"reset\"\n :title=\"resetTitle\"\n :class=\"suit('reset')\"\n :hidden=\"(!value && !modelValue) || (showLoadingIndicator && shouldShowLoadingIndicator)\"\n >\n <slot name=\"reset-icon\">\n <svg\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 20 20\"\n :class=\"suit('resetIcon')\"\n >\n <path\n d=\"M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z\"\n fillRule=\"evenodd\"\n />\n </svg>\n </slot>\n </button>\n\n <span\n v-if=\"showLoadingIndicator\"\n :hidden=\"!shouldShowLoadingIndicator\"\n :class=\"suit('loadingIndicator')\"\n >\n <slot name=\"loading-indicator\">\n <svg\n role=\"img\"\n aria-label=\"Results are loading\"\n width=\"16\"\n height=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n stroke=\"#444\"\n viewBox=\"0 0 38 38\"\n :class=\"suit('loadingIcon')\"\n >\n <g\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <g\n transform=\"translate(1 1)\"\n stroke-width=\"2\"\n >\n <circle\n stroke-opacity=\".5\"\n cx=\"18\"\n cy=\"18\"\n r=\"18\"\n />\n <path d=\"M36 18c0-9.94-8.06-18-18-18\">\n <animateTransform\n attributeName=\"transform\"\n type=\"rotate\"\n from=\"0 18 18\"\n to=\"360 18 18\"\n dur=\"1s\"\n repeatCount=\"indefinite\"\n />\n </path>\n </g>\n </g>\n </svg>\n </slot>\n </span>\n </form>\n</template>\n\n<script>\nimport { createSuitMixin } from '../mixins/suit';\n\nexport default {\n name: 'SearchInput',\n mixins: [createSuitMixin({ name: 'SearchBox' })],\n props: {\n placeholder: {\n type: String,\n default: 'Search here…',\n },\n autofocus: {\n type: Boolean,\n default: false,\n },\n showLoadingIndicator: {\n type: Boolean,\n default: false,\n },\n shouldShowLoadingIndicator: {\n type: Boolean,\n default: false,\n },\n submitTitle: {\n type: String,\n default: 'Search',\n },\n resetTitle: {\n type: String,\n default: 'Clear',\n },\n value: {\n type: String,\n required: false,\n default: undefined,\n },\n modelValue: {\n type: String,\n required: false,\n default: undefined,\n },\n },\n emits: ['input', 'update:modelValue', 'blur', 'focus', 'reset'],\n data() {\n return {\n query: '',\n };\n },\n methods: {\n onFormSubmit() {\n const input = this.$refs.input;\n input.blur();\n },\n onFormReset() {\n this.$emit('input', '');\n this.$emit('update:modelValue', '');\n this.$emit('reset');\n },\n },\n};\n</script>\n"],"names":["_createVNode","d","fillRule","fill","transform","cx","cy","r","attributeName","type","from","to","dur","repeatCount","_createBlock","action","role","novalidate","class","_ctx","onSubmit","$options","onReset","_createCommentVNode","autocorrect","autocapitalize","autocomplete","spellcheck","required","maxlength","placeholder","$props","autofocus","value","onFocus","$event","onBlur","onInput","target","ref","title","hidden","_renderSlot","xmlns","width","height","viewBox","_hoisted_1","_hoisted_2","stroke","_hoisted_3"],"mappings":"mIA4CUA,UACEC,EAAE,mZACFC,SAAS,sBAqBXF,UACEC,EAAE,yMACFC,SAAS,sBAsBXF,OACEG,KAAK,mBACK,YAEVH,OACEI,UAAU,gCACG,MAEbJ,6BACiB,KACfK,GAAG,KACHC,GAAG,KACHC,EAAE,OAEJP,UAAMC,EAAE,gCACND,sBACEQ,cAAc,YACdC,KAAK,SACLC,KAAK,UACLC,GAAG,YACHC,IAAI,KACJC,YAAY,2DA/G5BC,UACEC,OAAO,GACPC,KAAK,SACLC,WAAA,GACCC,MAAOC,eACPC,gGAAgBC,yDAChBC,+FAAeD,yDAEhBE,sEACAA,uFACAvB,WACES,KAAK,SACLe,YAAY,MACZC,eAAe,MACfC,aAAa,MACbC,WAAW,QACXC,SAAA,GACAC,UAAU,mBACC,SACVC,YAAaC,cACbC,UAAWD,YACXb,MAAOC,gBACPc,MAAOF,SAASA,aAChBG,uCAAOf,gBAAegB,KACtBC,sCAAMjB,eAAcgB,KACpBE,gCAAOlB,gBAAegB,EAAOG,OAAOL,OAAQd,4BAA2BgB,EAAOG,OAAOL,SACtFM,IAAI,sDAENvC,YACES,KAAK,SACJ+B,MAAOT,cACPb,MAAOC,iBACPsB,OAAQV,wBAAwBA,+BAEjCW,mDACE5B,SACEE,KAAK,MACL2B,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,QAAQ,YACP5B,MAAOC,uBAER4B,kCAQN/C,YACES,KAAK,QACJ+B,MAAOT,aACPb,MAAOC,gBACPsB,QAAUV,UAAUA,cAAgBA,wBAAwBA,+BAE7DW,kDACE5B,SACEE,KAAK,MACL2B,MAAM,6BACNC,MAAM,MACNC,OAAO,MACPC,QAAQ,YACP5B,MAAOC,sBAER6B,kCASEjB,4BADRjB,gBAEG2B,QAASV,6BACTb,MAAOC,6BAERuB,yDACE5B,SACEE,KAAK,mBACM,sBACX4B,MAAM,KACNC,OAAO,KACPF,MAAM,6BACNM,OAAO,OACPH,QAAQ,YACP5B,MAAOC,wBAER+B"}
|
|
1
|
+
{"version":3,"file":"SearchInput.vue_vue&type=template&id=2eed8ffc&lang.js","sources":["../../../../src/components/SearchInput.vue?vue&type=template&id=2eed8ffc&lang.js"],"sourcesContent":["<template>\n <form\n action=\"\"\n role=\"search\"\n novalidate\n :class=\"suit('form')\"\n @submit.prevent=\"onFormSubmit\"\n @reset.prevent=\"onFormReset\"\n >\n <!-- :value/@input allows us to pass v-model to the component in v2 -->\n <!-- :modelValue/@update:modelValue allows us to pass v-model to the component in v3 -->\n <input\n type=\"search\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n required\n maxlength=\"512\"\n aria-label=\"Search\"\n :placeholder=\"placeholder\"\n :autofocus=\"autofocus\"\n :class=\"suit('input')\"\n :value=\"value || modelValue\"\n @focus=\"$emit('focus', $event)\"\n @blur=\"$emit('blur', $event)\"\n @input=\"$emit('input', $event.target.value); $emit('update:modelValue', $event.target.value)\"\n ref=\"input\"\n >\n <button\n type=\"submit\"\n :title=\"submitTitle\"\n :class=\"suit('submit')\"\n :hidden=\"showLoadingIndicator && shouldShowLoadingIndicator\"\n >\n <slot name=\"submit-icon\">\n <svg\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"10\"\n height=\"10\"\n viewBox=\"0 0 40 40\"\n :class=\"suit('submitIcon')\"\n >\n <path\n d=\"M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z\"\n fillRule=\"evenodd\"\n />\n </svg>\n </slot>\n </button>\n\n <button\n type=\"reset\"\n :title=\"resetTitle\"\n :class=\"suit('reset')\"\n :hidden=\"(!value && !modelValue) || (showLoadingIndicator && shouldShowLoadingIndicator)\"\n >\n <slot name=\"reset-icon\">\n <svg\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 20 20\"\n :class=\"suit('resetIcon')\"\n >\n <path\n d=\"M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z\"\n fillRule=\"evenodd\"\n />\n </svg>\n </slot>\n </button>\n\n <span\n v-if=\"showLoadingIndicator\"\n :hidden=\"!shouldShowLoadingIndicator\"\n :class=\"suit('loadingIndicator')\"\n >\n <slot name=\"loading-indicator\">\n <svg\n role=\"img\"\n aria-label=\"Results are loading\"\n width=\"16\"\n height=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n stroke=\"#444\"\n viewBox=\"0 0 38 38\"\n :class=\"suit('loadingIcon')\"\n >\n <g\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <g\n transform=\"translate(1 1)\"\n stroke-width=\"2\"\n >\n <circle\n stroke-opacity=\".5\"\n cx=\"18\"\n cy=\"18\"\n r=\"18\"\n />\n <path d=\"M36 18c0-9.94-8.06-18-18-18\">\n <animateTransform\n attributeName=\"transform\"\n type=\"rotate\"\n from=\"0 18 18\"\n to=\"360 18 18\"\n dur=\"1s\"\n repeatCount=\"indefinite\"\n />\n </path>\n </g>\n </g>\n </svg>\n </slot>\n </span>\n </form>\n</template>\n\n<script>\nimport { createSuitMixin } from '../mixins/suit';\n\nexport default {\n name: 'SearchInput',\n mixins: [createSuitMixin({ name: 'SearchBox' })],\n props: {\n placeholder: {\n type: String,\n default: 'Search here…',\n },\n autofocus: {\n type: Boolean,\n default: false,\n },\n showLoadingIndicator: {\n type: Boolean,\n default: false,\n },\n shouldShowLoadingIndicator: {\n type: Boolean,\n default: false,\n },\n submitTitle: {\n type: String,\n default: 'Search',\n },\n resetTitle: {\n type: String,\n default: 'Clear',\n },\n value: {\n type: String,\n required: false,\n default: undefined,\n },\n modelValue: {\n type: String,\n required: false,\n default: undefined,\n },\n },\n emits: ['input', 'update:modelValue', 'blur', 'focus', 'reset'],\n data() {\n return {\n query: '',\n };\n },\n methods: {\n isFocused() {\n return document.activeElement === this.$refs.input;\n },\n onFormSubmit() {\n const input = this.$refs.input;\n input.blur();\n },\n onFormReset() {\n this.$emit('input', '');\n this.$emit('update:modelValue', '');\n this.$emit('reset');\n },\n },\n};\n</script>\n"],"names":["_createVNode","d","fillRule","fill","transform","cx","cy","r","attributeName","type","from","to","dur","repeatCount","_createBlock","action","role","novalidate","class","_ctx","onSubmit","$options","onReset","_createCommentVNode","autocorrect","autocapitalize","autocomplete","spellcheck","required","maxlength","placeholder","$props","autofocus","value","onFocus","$event","onBlur","onInput","target","ref","title","hidden","_renderSlot","xmlns","width","height","viewBox","_hoisted_1","_hoisted_2","stroke","_hoisted_3"],"mappings":"mIA4CUA,UACEC,EAAE,mZACFC,SAAS,sBAqBXF,UACEC,EAAE,yMACFC,SAAS,sBAsBXF,OACEG,KAAK,mBACK,YAEVH,OACEI,UAAU,gCACG,MAEbJ,6BACiB,KACfK,GAAG,KACHC,GAAG,KACHC,EAAE,OAEJP,UAAMC,EAAE,gCACND,sBACEQ,cAAc,YACdC,KAAK,SACLC,KAAK,UACLC,GAAG,YACHC,IAAI,KACJC,YAAY,2DA/G5BC,UACEC,OAAO,GACPC,KAAK,SACLC,WAAA,GACCC,MAAOC,eACPC,gGAAgBC,yDAChBC,+FAAeD,yDAEhBE,sEACAA,uFACAvB,WACES,KAAK,SACLe,YAAY,MACZC,eAAe,MACfC,aAAa,MACbC,WAAW,QACXC,SAAA,GACAC,UAAU,mBACC,SACVC,YAAaC,cACbC,UAAWD,YACXb,MAAOC,gBACPc,MAAOF,SAASA,aAChBG,uCAAOf,gBAAegB,KACtBC,sCAAMjB,eAAcgB,KACpBE,gCAAOlB,gBAAegB,EAAOG,OAAOL,OAAQd,4BAA2BgB,EAAOG,OAAOL,SACtFM,IAAI,sDAENvC,YACES,KAAK,SACJ+B,MAAOT,cACPb,MAAOC,iBACPsB,OAAQV,wBAAwBA,+BAEjCW,mDACE5B,SACEE,KAAK,MACL2B,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,QAAQ,YACP5B,MAAOC,uBAER4B,kCAQN/C,YACES,KAAK,QACJ+B,MAAOT,aACPb,MAAOC,gBACPsB,QAAUV,UAAUA,cAAgBA,wBAAwBA,+BAE7DW,kDACE5B,SACEE,KAAK,MACL2B,MAAM,6BACNC,MAAM,MACNC,OAAO,MACPC,QAAQ,YACP5B,MAAOC,sBAER6B,kCASEjB,4BADRjB,gBAEG2B,QAASV,6BACTb,MAAOC,6BAERuB,yDACE5B,SACEE,KAAK,mBACM,sBACX4B,MAAM,KACNC,OAAO,KACPF,MAAM,6BACNM,OAAO,OACPH,QAAQ,YACP5B,MAAOC,wBAER+B"}
|