@getlupa/vue 0.16.0 → 0.16.2

package/dist/lupaSearch.js

@@ -17791,6 +17791,7 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$F = {
+  key: 0,
   id: "lupa-search-result-filters",
   class: "lupa-search-result-filters"
 };
@@ -17815,6 +17816,10 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     const showCurrentFilters = vue.computed(() => {
       return currentFiltersVisible.value ? Boolean(props.options.facets) : false;
     });
+    const visible = vue.computed(() => {
+      var _a;
+      return (_a = props.options.visible) != null ? _a : true;
+    });
     const filter2 = () => {
       emit("filter");
     };
@@ -17827,7 +17832,7 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     __expose({ fetch: fetch2 });
     return (_ctx, _cache) => {
       var _a;
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$F, [
+      return visible.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$F, [
         showCurrentFilters.value ? (vue.openBlock(), vue.createBlock(_sfc_main$W, {
           key: 0,
           options: _ctx.options.currentFilters,
@@ -17844,7 +17849,7 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
           options: _ctx.options.facets,
           onFilter: filter2
         }, null, 8, ["options"])) : vue.createCommentVNode("", true)
-      ]);
+      ])) : vue.createCommentVNode("", true);
     };
   }
 });
@@ -17954,6 +17959,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(breadcrumbsValue.value, (breadcrumb, index) => {
+          var _a;
           return vue.openBlock(), vue.createElementBlock("span", {
             class: "lupa-search-results-breadcrumb",
             key: index
@@ -17963,11 +17969,11 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
               class: "lupa-search-results-breadcrumb-link",
               href: breadcrumb.link,
               onClick: (e2) => {
-                var _a;
-                return handleNavigation(e2, (_a = breadcrumb == null ? void 0 : breadcrumb.link) != null ? _a : "");
+                var _a2;
+                return handleNavigation(e2, (_a2 = breadcrumb == null ? void 0 : breadcrumb.link) != null ? _a2 : "");
               }
             }, vue.toDisplayString(getLabel(breadcrumb.label)), 9, _hoisted_2$t)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$m, vue.toDisplayString(getLabel(breadcrumb.label)), 1)),
-            index < breadcrumbsValue.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$f, " / ")) : vue.createCommentVNode("", true)
+            index < breadcrumbsValue.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$f, vue.toDisplayString((_a = breadcrumb.separator) != null ? _a : "/"), 1)) : vue.createCommentVNode("", true)
           ]);
         }), 128))
       ]);
@@ -17975,6 +17981,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$C = {
+  key: 0,
   id: "lupa-search-result-filters",
   class: "lupa-search-result-filters lupa-search-result-top-filters"
 };
@@ -17985,12 +17992,17 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
   },
   emits: ["filter"],
   setup(__props, { emit }) {
+    const props = __props;
     const filter2 = () => {
       emit("filter");
     };
+    const visible = vue.computed(() => {
+      var _a;
+      return (_a = props.options.visible) != null ? _a : true;
+    });
     return (_ctx, _cache) => {
       var _a;
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
+      return visible.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
         _ctx.options.facets ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
           key: 0,
           options: _ctx.options.facets,
@@ -17998,7 +18010,7 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
           clearable: true,
           onFilter: filter2
         }, null, 8, ["options", "facet-style"])) : vue.createCommentVNode("", true)
-      ]);
+      ])) : vue.createCommentVNode("", true);
     };
   }
 });
@@ -18043,13 +18055,14 @@ const _hoisted_1$A = {
 const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsMobileToggle",
   props: {
-    label: {},
+    labels: {},
     showFilterCount: { type: Boolean }
   },
   setup(__props) {
+    const props = __props;
     const searchResultStore = useSearchResultStore();
     const optionsStore = useOptionsStore();
-    const { currentFilterCount } = storeToRefs(searchResultStore);
+    const { currentFilterCount, isMobileSidebarVisible } = storeToRefs(searchResultStore);
     const { searchResultOptions } = storeToRefs(optionsStore);
     const disableMobileBodyScrollLock = vue.computed(
       () => {
@@ -18057,9 +18070,22 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
         return (_c = (_b = (_a = searchResultOptions.value.filters) == null ? void 0 : _a.facets) == null ? void 0 : _b.disableMobileBodyScrollLock) != null ? _c : false;
       }
     );
+    const isSidebarVisible = vue.computed(() => isMobileSidebarVisible.value);
+    const defaultLabel = vue.computed(() => props.labels.mobileFilterButton);
+    const activeLabel = vue.computed(() => props.labels.mobileFilterButtonActive);
+    const openLabel = vue.computed(() => props.labels.mobileFilterButtonOpen);
+    const label = vue.computed(() => {
+      if (isSidebarVisible.value) {
+        return openLabel.value;
+      }
+      if (hasActiveFilters.value) {
+        return activeLabel.value;
+      }
+      return defaultLabel.value;
+    });
     const handleMobileToggle = () => {
       searchResultStore.setSidebarState({
-        visible: true,
+        visible: !isSidebarVisible.value,
         disableBodyScrolling: !disableMobileBodyScrollLock.value
       });
     };
@@ -18068,11 +18094,12 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(["lupa-mobile-toggle", {
           "lupa-mobile-toggle-filters-empty": vue.unref(currentFilterCount) < 1,
-          "lupa-mobile-toggle-has-filters": hasActiveFilters.value
+          "lupa-mobile-toggle-has-filters": hasActiveFilters.value,
+          "lupa-sidebar-open": isSidebarVisible.value
         }]),
         onClick: handleMobileToggle
       }, [
-        vue.createTextVNode(vue.toDisplayString(_ctx.label) + " ", 1),
+        vue.createTextVNode(vue.toDisplayString(label.value) + " ", 1),
         _ctx.showFilterCount && vue.unref(currentFilterCount) > 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$A, vue.toDisplayString(vue.unref(currentFilterCount)), 1)) : vue.createCommentVNode("", true)
       ], 2);
     };
@@ -18519,9 +18546,9 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("div", _hoisted_6$5, [
           toolbarRightLabel.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$3, vue.toDisplayString(toolbarRightLabel.value), 1)) : vue.createCommentVNode("", true),
           vue.createVNode(_sfc_main$G, {
-            label: optionsValue.value.labels.mobileFilterButton,
+            labels: optionsValue.value.labels,
             "show-filter-count": showMobileFilterCount.value
-          }, null, 8, ["label", "show-filter-count"]),
+          }, null, 8, ["labels", "show-filter-count"]),
           paginationDisplay.value.pageSize ? (vue.openBlock(), vue.createBlock(_sfc_main$D, {
             key: 1,
             options: paginationOptions.value.pageSize,

package/dist/lupaSearch.mjs

@@ -17789,6 +17789,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$F = {
+  key: 0,
   id: "lupa-search-result-filters",
   class: "lupa-search-result-filters"
 };
@@ -17813,6 +17814,10 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     const showCurrentFilters = computed(() => {
       return currentFiltersVisible.value ? Boolean(props.options.facets) : false;
     });
+    const visible = computed(() => {
+      var _a;
+      return (_a = props.options.visible) != null ? _a : true;
+    });
     const filter2 = () => {
       emit("filter");
     };
@@ -17825,7 +17830,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     __expose({ fetch: fetch2 });
     return (_ctx, _cache) => {
       var _a;
-      return openBlock(), createElementBlock("div", _hoisted_1$F, [
+      return visible.value ? (openBlock(), createElementBlock("div", _hoisted_1$F, [
         showCurrentFilters.value ? (openBlock(), createBlock(_sfc_main$W, {
           key: 0,
           options: _ctx.options.currentFilters,
@@ -17842,7 +17847,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
           options: _ctx.options.facets,
           onFilter: filter2
         }, null, 8, ["options"])) : createCommentVNode("", true)
-      ]);
+      ])) : createCommentVNode("", true);
     };
   }
 });
@@ -17952,6 +17957,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$D, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(breadcrumbsValue.value, (breadcrumb, index) => {
+          var _a;
           return openBlock(), createElementBlock("span", {
             class: "lupa-search-results-breadcrumb",
             key: index
@@ -17961,11 +17967,11 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
               class: "lupa-search-results-breadcrumb-link",
               href: breadcrumb.link,
               onClick: (e2) => {
-                var _a;
-                return handleNavigation(e2, (_a = breadcrumb == null ? void 0 : breadcrumb.link) != null ? _a : "");
+                var _a2;
+                return handleNavigation(e2, (_a2 = breadcrumb == null ? void 0 : breadcrumb.link) != null ? _a2 : "");
               }
             }, toDisplayString(getLabel(breadcrumb.label)), 9, _hoisted_2$t)) : (openBlock(), createElementBlock("span", _hoisted_3$m, toDisplayString(getLabel(breadcrumb.label)), 1)),
-            index < breadcrumbsValue.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$f, " / ")) : createCommentVNode("", true)
+            index < breadcrumbsValue.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$f, toDisplayString((_a = breadcrumb.separator) != null ? _a : "/"), 1)) : createCommentVNode("", true)
           ]);
         }), 128))
       ]);
@@ -17973,6 +17979,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$C = {
+  key: 0,
   id: "lupa-search-result-filters",
   class: "lupa-search-result-filters lupa-search-result-top-filters"
 };
@@ -17983,12 +17990,17 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   },
   emits: ["filter"],
   setup(__props, { emit }) {
+    const props = __props;
     const filter2 = () => {
       emit("filter");
     };
+    const visible = computed(() => {
+      var _a;
+      return (_a = props.options.visible) != null ? _a : true;
+    });
     return (_ctx, _cache) => {
       var _a;
-      return openBlock(), createElementBlock("div", _hoisted_1$C, [
+      return visible.value ? (openBlock(), createElementBlock("div", _hoisted_1$C, [
         _ctx.options.facets ? (openBlock(), createBlock(_sfc_main$M, {
           key: 0,
           options: _ctx.options.facets,
@@ -17996,7 +18008,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
           clearable: true,
           onFilter: filter2
         }, null, 8, ["options", "facet-style"])) : createCommentVNode("", true)
-      ]);
+      ])) : createCommentVNode("", true);
     };
   }
 });
@@ -18041,13 +18053,14 @@ const _hoisted_1$A = {
 const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsMobileToggle",
   props: {
-    label: {},
+    labels: {},
     showFilterCount: { type: Boolean }
   },
   setup(__props) {
+    const props = __props;
     const searchResultStore = useSearchResultStore();
     const optionsStore = useOptionsStore();
-    const { currentFilterCount } = storeToRefs(searchResultStore);
+    const { currentFilterCount, isMobileSidebarVisible } = storeToRefs(searchResultStore);
     const { searchResultOptions } = storeToRefs(optionsStore);
     const disableMobileBodyScrollLock = computed(
       () => {
@@ -18055,9 +18068,22 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         return (_c = (_b = (_a = searchResultOptions.value.filters) == null ? void 0 : _a.facets) == null ? void 0 : _b.disableMobileBodyScrollLock) != null ? _c : false;
       }
     );
+    const isSidebarVisible = computed(() => isMobileSidebarVisible.value);
+    const defaultLabel = computed(() => props.labels.mobileFilterButton);
+    const activeLabel = computed(() => props.labels.mobileFilterButtonActive);
+    const openLabel = computed(() => props.labels.mobileFilterButtonOpen);
+    const label = computed(() => {
+      if (isSidebarVisible.value) {
+        return openLabel.value;
+      }
+      if (hasActiveFilters.value) {
+        return activeLabel.value;
+      }
+      return defaultLabel.value;
+    });
     const handleMobileToggle = () => {
       searchResultStore.setSidebarState({
-        visible: true,
+        visible: !isSidebarVisible.value,
         disableBodyScrolling: !disableMobileBodyScrollLock.value
       });
     };
@@ -18066,11 +18092,12 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["lupa-mobile-toggle", {
           "lupa-mobile-toggle-filters-empty": unref(currentFilterCount) < 1,
-          "lupa-mobile-toggle-has-filters": hasActiveFilters.value
+          "lupa-mobile-toggle-has-filters": hasActiveFilters.value,
+          "lupa-sidebar-open": isSidebarVisible.value
         }]),
         onClick: handleMobileToggle
       }, [
-        createTextVNode(toDisplayString(_ctx.label) + " ", 1),
+        createTextVNode(toDisplayString(label.value) + " ", 1),
         _ctx.showFilterCount && unref(currentFilterCount) > 0 ? (openBlock(), createElementBlock("span", _hoisted_1$A, toDisplayString(unref(currentFilterCount)), 1)) : createCommentVNode("", true)
       ], 2);
     };
@@ -18517,9 +18544,9 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         createElementVNode("div", _hoisted_6$5, [
           toolbarRightLabel.value ? (openBlock(), createElementBlock("div", _hoisted_7$3, toDisplayString(toolbarRightLabel.value), 1)) : createCommentVNode("", true),
           createVNode(_sfc_main$G, {
-            label: optionsValue.value.labels.mobileFilterButton,
+            labels: optionsValue.value.labels,
             "show-filter-count": showMobileFilterCount.value
-          }, null, 8, ["label", "show-filter-count"]),
+          }, null, 8, ["labels", "show-filter-count"]),
           paginationDisplay.value.pageSize ? (openBlock(), createBlock(_sfc_main$D, {
             key: 1,
             options: paginationOptions.value.pageSize,

package/dist/src/components/search-results/products/SearchResultsMobileToggle.vue.d.ts

@@ -1,7 +1,8 @@
 import type { PropType as __PropType } from 'vue';
+import { SearchResultsOptionLabels } from '../../../types/search-results/SearchResultsOptions';
 declare const _sfc_main: import("vue").DefineComponent<{
-    label: {
-        type: __PropType<string>;
+    labels: {
+        type: __PropType<SearchResultsOptionLabels>;
         required: true;
     };
     showFilterCount: {
@@ -9,8 +10,8 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: true;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    label: {
-        type: __PropType<string>;
+    labels: {
+        type: __PropType<SearchResultsOptionLabels>;
         required: true;
     };
     showFilterCount: {

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

@@ -74,6 +74,8 @@ export type SearchResultsOptionLabels = SearchResultsPaginationLabels & SearchRe
     itemCount: string;
     emptyResults: string;
     mobileFilterButton: string;
+    mobileFilterButtonActive: string;
+    mobileFilterButtonOpen: string;
     mobileFilterCloseButton: string;
     htmlTitleTemplate: string;
     outOfStock?: string;
@@ -222,6 +224,7 @@ export type ResultFacetOptions = {
     facetFilterQueries?: Record<string, FacetFilterQuery>;
 };
 export type SearchResultsFilterOptions = {
+    visible?: boolean;
     currentFilters?: ResultCurrentFilterOptions;
     facets?: ResultFacetOptions;
     categories?: CategoryFilterOptions;
@@ -229,6 +232,7 @@ export type SearchResultsFilterOptions = {
 export type SearchResultsBreadcrumb = {
     label: string;
     link?: string;
+    separator?: string;
 };
 export type DynamicData = {
     enabled?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getlupa/vue",
-  "version": "0.16.0",
+  "version": "0.16.2",
   "main": "dist/lupaSearch.mjs",
   "module": "dist/lupaSearch.mjs",
   "types": "dist/src/index.d.ts",