@getlupa/client 0.7.0-alpha-15 → 0.7.0-alpha-18

package/dist/cjs/components/search-results/filters/facets/StatsFacet.vue.d.ts

@@ -26,6 +26,8 @@ export default class TermFacet extends Vue {
     get facetMin(): number;
     get facetMax(): number;
     get statsSummary(): string;
+    get separator(): string;
+    get sliderInputFormat(): string | undefined;
     onMinValueChange(): void;
     onMaxValueChange(): void;
     handleInputChange(): void;

package/dist/cjs/index.min.js

@@ -14806,7 +14806,7 @@ let TermFacet = class TermFacet extends Vue$1 {
     }
     get fromValue() {
         return this.isPrice
-            ? this.sliderRange[0].toFixed(2)
+            ? this.sliderRange[0].toFixed(2).replace(".", this.separator)
             : `${this.sliderRange[0]}`;
     }
     set fromValue(stringValue) {
@@ -14822,7 +14822,7 @@ let TermFacet = class TermFacet extends Vue$1 {
     }
     get toValue() {
         return this.isPrice
-            ? this.sliderRange[1].toFixed(2)
+            ? this.sliderRange[1].toFixed(2).replace(".", this.separator)
             : `${this.sliderRange[1]}`;
     }
     set toValue(stringValue) {
@@ -14881,9 +14881,16 @@ let TermFacet = class TermFacet extends Vue$1 {
     get statsSummary() {
         const [min, max] = this.sliderRange;
         return this.isPrice
-            ? formatPriceSummary([min, max], this.currency, this.searchResultOptions.labels.priceSeparator)
+            ? formatPriceSummary([min, max], this.currency, this.separator)
             : formatRange({ gte: min, lte: max });
     }
+    get separator() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.searchResultOptions) === null || _a === void 0 ? void 0 : _a.labels) === null || _b === void 0 ? void 0 : _b.priceSeparator) !== null && _c !== void 0 ? _c : ",";
+    }
+    get sliderInputFormat() {
+        return this.isPrice ? `[0-9]+([${this.separator}][0-9]{1,2})?` : undefined;
+    }
     onMinValueChange() {
         this.innerSliderRange = [];
     }
@@ -14974,10 +14981,10 @@ var __vue_render__$N = function () {
                   },
                 ],
                 attrs: {
-                  type: "number",
+                  type: "text",
                   max: _vm.facetMax,
                   min: _vm.facetMin,
-                  step: _vm.isPrice ? "0.01" : "1",
+                  pattern: _vm.sliderInputFormat,
                 },
                 domProps: { value: _vm.fromValue },
                 on: {
@@ -15014,10 +15021,10 @@ var __vue_render__$N = function () {
                   },
                 ],
                 attrs: {
-                  type: "number",
+                  type: "text",
                   max: _vm.facetMax,
                   min: _vm.facetMin,
-                  step: _vm.isPrice ? "0.01" : "1",
+                  pattern: _vm.sliderInputFormat,
                 },
                 domProps: { value: _vm.toValue },
                 on: {
@@ -20716,7 +20723,12 @@ let SearchResults = class SearchResults extends Vue$1 {
         this.setDefaultLimit(this.defaultSearchResultPageSize);
     }
     handleParamsChange() {
+        var _a, _b;
         this.handleUrlChange();
+        (_b = (_a = this.options.callbacks) === null || _a === void 0 ? void 0 : _a.onUrlQueryChange) === null || _b === void 0 ? void 0 : _b.call(_a, {
+            queryKey: this.options.queryKey,
+            urlQueryString: this.searchString,
+        });
     }
     handleUrlChange(params) {
         const searchParams = params || new URLSearchParams(window.location.search);
@@ -22416,6 +22428,7 @@ const tracking = (options) => {
     initTracking(options);
 };
 const searchBox = (options) => {
+    clearSearchBox();
     Vue$1.use(Vuex);
     app.box = new Vue$1({
         el: options.inputSelector,
@@ -22425,6 +22438,7 @@ const searchBox = (options) => {
     });
 };
 const searchResults = (options) => {
+    clearSearchResults();
     Vue$1.use(Vuex);
     app.results = new Vue$1({
         el: options.containerSelector,
@@ -22434,6 +22448,7 @@ const searchResults = (options) => {
     });
 };
 const productList = (options) => {
+    clearProductList();
     Vue$1.use(Vuex);
     app.productList = new Vue$1({
         el: options.containerSelector,
@@ -22444,15 +22459,30 @@ const productList = (options) => {
 };
 const clearSearchBox = () => {
     var _a;
-    (_a = app.box) === null || _a === void 0 ? void 0 : _a.$destroy();
+    try {
+        (_a = app.box) === null || _a === void 0 ? void 0 : _a.$destroy();
+    }
+    catch (_b) {
+        // do nothing, already destroyed;
+    }
 };
 const clearSearchResults = () => {
     var _a;
-    (_a = app.results) === null || _a === void 0 ? void 0 : _a.$destroy();
+    try {
+        (_a = app.results) === null || _a === void 0 ? void 0 : _a.$destroy();
+    }
+    catch (_b) {
+        // do nothing, already destroyed;
+    }
 };
 const clearProductList = () => {
     var _a;
-    (_a = app.productList) === null || _a === void 0 ? void 0 : _a.$destroy();
+    try {
+        (_a = app.productList) === null || _a === void 0 ? void 0 : _a.$destroy();
+    }
+    catch (_b) {
+        // do nothing, already destroyed;
+    }
 };
 const lupaSearch = {
     searchBox,

package/dist/cjs/types/search-results/SearchResultsOptions.d.ts

@@ -23,13 +23,15 @@ export declare type SearchResultsSimilarQueriesLabels = {
 };
 export declare type CallbackContext = {
     queryKey: string;
-    hasResults: boolean;
+    hasResults?: boolean;
+    urlQueryString?: string;
 };
 export declare type SearchResultEventCallbacks = {
     onSearchResults?: (context: CallbackContext) => unknown;
     onAdditionalPanelResults?: (context: CallbackContext) => unknown;
     onCategoryFilterResults?: (context: CallbackContext) => unknown;
     onProductClick?: (context: CallbackContext) => unknown;
+    onUrlQueryChange?: (context: CallbackContext) => unknown;
     onMounted?: () => unknown;
 };
 export declare type SearchResultsOptionLabels = SearchResultsPaginationLabels & SearchResultsDidYouMeanLabels & SearchResultsSimilarQueriesLabels & {

package/dist/es/components/search-results/filters/facets/StatsFacet.vue.d.ts

@@ -26,6 +26,8 @@ export default class TermFacet extends Vue {
     get facetMin(): number;
     get facetMax(): number;
     get statsSummary(): string;
+    get separator(): string;
+    get sliderInputFormat(): string | undefined;
     onMinValueChange(): void;
     onMaxValueChange(): void;
     handleInputChange(): void;

package/dist/es/index.min.js

@@ -14802,7 +14802,7 @@ let TermFacet = class TermFacet extends Vue$1 {
     }
     get fromValue() {
         return this.isPrice
-            ? this.sliderRange[0].toFixed(2)
+            ? this.sliderRange[0].toFixed(2).replace(".", this.separator)
             : `${this.sliderRange[0]}`;
     }
     set fromValue(stringValue) {
@@ -14818,7 +14818,7 @@ let TermFacet = class TermFacet extends Vue$1 {
     }
     get toValue() {
         return this.isPrice
-            ? this.sliderRange[1].toFixed(2)
+            ? this.sliderRange[1].toFixed(2).replace(".", this.separator)
             : `${this.sliderRange[1]}`;
     }
     set toValue(stringValue) {
@@ -14877,9 +14877,16 @@ let TermFacet = class TermFacet extends Vue$1 {
     get statsSummary() {
         const [min, max] = this.sliderRange;
         return this.isPrice
-            ? formatPriceSummary([min, max], this.currency, this.searchResultOptions.labels.priceSeparator)
+            ? formatPriceSummary([min, max], this.currency, this.separator)
             : formatRange({ gte: min, lte: max });
     }
+    get separator() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.searchResultOptions) === null || _a === void 0 ? void 0 : _a.labels) === null || _b === void 0 ? void 0 : _b.priceSeparator) !== null && _c !== void 0 ? _c : ",";
+    }
+    get sliderInputFormat() {
+        return this.isPrice ? `[0-9]+([${this.separator}][0-9]{1,2})?` : undefined;
+    }
     onMinValueChange() {
         this.innerSliderRange = [];
     }
@@ -14970,10 +14977,10 @@ var __vue_render__$N = function () {
                   },
                 ],
                 attrs: {
-                  type: "number",
+                  type: "text",
                   max: _vm.facetMax,
                   min: _vm.facetMin,
-                  step: _vm.isPrice ? "0.01" : "1",
+                  pattern: _vm.sliderInputFormat,
                 },
                 domProps: { value: _vm.fromValue },
                 on: {
@@ -15010,10 +15017,10 @@ var __vue_render__$N = function () {
                   },
                 ],
                 attrs: {
-                  type: "number",
+                  type: "text",
                   max: _vm.facetMax,
                   min: _vm.facetMin,
-                  step: _vm.isPrice ? "0.01" : "1",
+                  pattern: _vm.sliderInputFormat,
                 },
                 domProps: { value: _vm.toValue },
                 on: {
@@ -20712,7 +20719,12 @@ let SearchResults = class SearchResults extends Vue$1 {
         this.setDefaultLimit(this.defaultSearchResultPageSize);
     }
     handleParamsChange() {
+        var _a, _b;
         this.handleUrlChange();
+        (_b = (_a = this.options.callbacks) === null || _a === void 0 ? void 0 : _a.onUrlQueryChange) === null || _b === void 0 ? void 0 : _b.call(_a, {
+            queryKey: this.options.queryKey,
+            urlQueryString: this.searchString,
+        });
     }
     handleUrlChange(params) {
         const searchParams = params || new URLSearchParams(window.location.search);
@@ -22412,6 +22424,7 @@ const tracking = (options) => {
     initTracking(options);
 };
 const searchBox = (options) => {
+    clearSearchBox();
     Vue$1.use(Vuex);
     app.box = new Vue$1({
         el: options.inputSelector,
@@ -22421,6 +22434,7 @@ const searchBox = (options) => {
     });
 };
 const searchResults = (options) => {
+    clearSearchResults();
     Vue$1.use(Vuex);
     app.results = new Vue$1({
         el: options.containerSelector,
@@ -22430,6 +22444,7 @@ const searchResults = (options) => {
     });
 };
 const productList = (options) => {
+    clearProductList();
     Vue$1.use(Vuex);
     app.productList = new Vue$1({
         el: options.containerSelector,
@@ -22440,15 +22455,30 @@ const productList = (options) => {
 };
 const clearSearchBox = () => {
     var _a;
-    (_a = app.box) === null || _a === void 0 ? void 0 : _a.$destroy();
+    try {
+        (_a = app.box) === null || _a === void 0 ? void 0 : _a.$destroy();
+    }
+    catch (_b) {
+        // do nothing, already destroyed;
+    }
 };
 const clearSearchResults = () => {
     var _a;
-    (_a = app.results) === null || _a === void 0 ? void 0 : _a.$destroy();
+    try {
+        (_a = app.results) === null || _a === void 0 ? void 0 : _a.$destroy();
+    }
+    catch (_b) {
+        // do nothing, already destroyed;
+    }
 };
 const clearProductList = () => {
     var _a;
-    (_a = app.productList) === null || _a === void 0 ? void 0 : _a.$destroy();
+    try {
+        (_a = app.productList) === null || _a === void 0 ? void 0 : _a.$destroy();
+    }
+    catch (_b) {
+        // do nothing, already destroyed;
+    }
 };
 const lupaSearch = {
     searchBox,

package/dist/es/types/search-results/SearchResultsOptions.d.ts

@@ -23,13 +23,15 @@ export declare type SearchResultsSimilarQueriesLabels = {
 };
 export declare type CallbackContext = {
     queryKey: string;
-    hasResults: boolean;
+    hasResults?: boolean;
+    urlQueryString?: string;
 };
 export declare type SearchResultEventCallbacks = {
     onSearchResults?: (context: CallbackContext) => unknown;
     onAdditionalPanelResults?: (context: CallbackContext) => unknown;
     onCategoryFilterResults?: (context: CallbackContext) => unknown;
     onProductClick?: (context: CallbackContext) => unknown;
+    onUrlQueryChange?: (context: CallbackContext) => unknown;
     onMounted?: () => unknown;
 };
 export declare type SearchResultsOptionLabels = SearchResultsPaginationLabels & SearchResultsDidYouMeanLabels & SearchResultsSimilarQueriesLabels & {

package/dist/iife/components/search-results/filters/facets/StatsFacet.vue.d.ts

@@ -26,6 +26,8 @@ export default class TermFacet extends Vue {
     get facetMin(): number;
     get facetMax(): number;
     get statsSummary(): string;
+    get separator(): string;
+    get sliderInputFormat(): string | undefined;
     onMinValueChange(): void;
     onMaxValueChange(): void;
     handleInputChange(): void;