@getlupa/vue 0.0.9 → 0.0.11

package/README.md

@@ -1,4 +1,88 @@
-# lupasearch-client
+# Quickstart
+
+This is a vue plugin for
+
+For SSR support, see [Plugin for Nuxt 3](https://github.com/lupasearch/lupasearch-nuxt)
+
+For full configuration options see [Main repository](https://github.com/lupasearch/lupasearch-client)
+
+## Quick Setup
+
+1. Add `LupaSearch` dependency to your project
+
+```bash
+# Using pnpm
+pnpm add -D @getlupa/nuxt @getlupa/vue
+
+# Using yarn
+yarn add --dev @getlupa/nuxt @getlupa/vue
+
+# Using npm
+npm install --save-dev @getlupa/nuxt @getlupa/vue
+```
+
+2. Import desired plugins to your component:
+
+```html
+<script setup lang="ts">
+  import { SearchBox, SearchBoxOptions, SearchResults, SearchResultsOptions } from '@getlupa/vue'
+  import '@getlupa/vue/dist/style.css'
+
+  const searchBoxOptions: SearchBoxOptions = {
+    // See main repository for full list of available options
+  }
+
+  const searchResultsOptions: SearchResultsOptions = {
+    // See main repository for full list of available options
+  }
+</script>
+<template>
+  <div class="box-wrapper">
+    <SearchBox :options="searchBoxOptions" />
+  </div>
+  <div class="result-wrapper">
+    <SearchResults :options="searchResultsOptions" />
+  </div>
+</template>
+```
+
+See main repo for full configuration options examples.
+
+## Using Slots
+
+```html
+<script lang="ts" setup>
+  import { SearchBox, SearchBoxOptions, SearchResults, SearchResultsOptions } from '@getlupa/vue'
+  import '@getlupa/vue/dist/style.css'
+
+  const searchBoxOptions: SearchBoxOptions = {
+    // See main repository for full list of available options
+  }
+
+  const searchResultsOptions: SearchResultsOptions = {
+    // See main repository for full list of available options
+  }
+</script>
+
+<template>
+  <div>
+    <div>
+      <LupaSearchBox :options="searchBoxOptions" />
+    </div>
+    <div style="margin-top: 25px">
+      <LupaSearchResults :options="searchResultsOptions">
+        <template #productCard="props">
+          <div :style="props.style">
+            <div style="margin-bottom: 25px">{{ props.product.name }}</div>
+          </div>
+        </template>
+      </LupaSearchResults>
+    </div>
+  </div>
+</template>
+```
+
+# Development
 
 This template should help get you started developing with Vue 3 in Vite.
 
@@ -13,8 +97,8 @@ TypeScript cannot handle type information for `.vue` imports by default, so we r
 If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
 
 1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
 
 ## Customize configuration
@@ -24,23 +108,23 @@ See [Vite Configuration Reference](https://vitejs.dev/config/).
 ## Project Setup
 
 ```sh
-npm install
+yarn install
 ```
 
 ### Compile and Hot-Reload for Development
 
 ```sh
-npm run dev
+yarn dev
 ```
 
 ### Type-Check, Compile and Minify for Production
 
 ```sh
-npm run build
+yarn build
 ```
 
 ### Lint with [ESLint](https://eslint.org/)
 
 ```sh
-npm run lint
+yarn lint
 ```

package/dist/lupaSearch.js

@@ -4697,10 +4697,12 @@ const useSearchResultStore = defineStore("searchResult", () => {
         pageSize: searchResult.value.limit || 0
       };
     }
-    setDocumentTitle(
-      (_b = (_a = optionsStore.searchResultOptions) == null ? void 0 : _a.labels) == null ? void 0 : _b.htmlTitleTemplate,
-      newSearchResult.searchText
-    );
+    if (typeof document !== "undefined") {
+      setDocumentTitle(
+        (_b = (_a = optionsStore.searchResultOptions) == null ? void 0 : _a.labels) == null ? void 0 : _b.htmlTitleTemplate,
+        newSearchResult.searchText
+      );
+    }
     searchResult.value = newSearchResult;
     return { searchResult: newSearchResult };
   };
@@ -4814,6 +4816,35 @@ const getPublicQuery = (publicQuery, initialFilters, isProductList) => {
     searchText: isProductList ? "" : publicQuery.searchText
   });
 };
+const getSearchParams = (url, params, baseUrl) => {
+  let searchParams;
+  if (typeof window !== "undefined") {
+    searchParams = params || new URLSearchParams(window.location.search);
+  } else {
+    if (url) {
+      searchParams = params || new URLSearchParams(new URL(url, baseUrl).search);
+    } else {
+      throw new Error("LupaSaerch: ssr.url is required on the server side");
+    }
+  }
+  return searchParams;
+};
+const getInitialSearchResults = (options, defaultData) => __async(exports, null, function* () {
+  var _a, _b, _c;
+  const searchParams = getSearchParams((_a = options.ssr) == null ? void 0 : _a.url, void 0, (_b = options.ssr) == null ? void 0 : _b.baseUrl);
+  const publicQuery = createPublicQuery(
+    parseParams(searchParams),
+    options.sort,
+    defaultData == null ? void 0 : defaultData.pageSize
+  );
+  const query = getPublicQuery(publicQuery, (_c = defaultData == null ? void 0 : defaultData.filters) != null ? _c : {}, false);
+  try {
+    const result = yield LupaSearchSdk.query(options.queryKey, query, options.options);
+    return result;
+  } catch (e) {
+    options.options.onError(e);
+  }
+});
 const _hoisted_1$N = {
   key: 0,
   id: "lupa-search-results-did-you-mean"
@@ -9118,7 +9149,8 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     options: {},
     initialFilters: {},
     isProductList: { type: Boolean },
-    isContainer: { type: Boolean }
+    isContainer: { type: Boolean },
+    initialData: {}
   },
   setup(__props) {
     const props = __props;
@@ -9224,7 +9256,8 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
       screenStore.setScreenWidth({ width: window.innerWidth });
     };
     const handleUrlChange = (params) => {
-      const searchParams = params || new URLSearchParams(window.location.search);
+      var _a;
+      const searchParams = getSearchParams((_a = props.options.ssr) == null ? void 0 : _a.url, params);
       const publicQuery = createPublicQuery(
         parseParams(searchParams),
         props.options.sort,
@@ -9244,15 +9277,12 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
         }
       }
       const params = new URLSearchParams(window.location.search);
-      if (!params.has(QUERY_PARAMS.QUERY)) {
+      if (!params.has(QUERY_PARAMS.QUERY) && !props.initialData) {
         handleUrlChange(params);
       }
       paramStore.add(parseParams(params));
       paramStore.setDefaultLimit(defaultSearchResultPageSize.value);
     };
-    const handleCreated = () => {
-      handleUrlChange();
-    };
     vue.watch(searchString, () => handleParamsChange());
     const handleParamsChange = () => {
       var _a, _b;
@@ -9262,6 +9292,13 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
         urlQueryString: searchString.value
       });
     };
+    const handleCreated = () => {
+      const initialData = props.initialData;
+      if (initialData) {
+        handleResults({ queryKey: props.options.queryKey, results: initialData });
+        searchResultStore.add(__spreadValues({}, initialData));
+      }
+    };
     handleCreated();
     return (_ctx, _cache) => {
       var _a, _b, _c, _d, _e;
@@ -15807,4 +15844,5 @@ exports.Recommendations = _sfc_main;
 exports.SearchBox = _sfc_main$R;
 exports.SearchContainer = _sfc_main$1;
 exports.SearchResults = _sfc_main$4;
+exports.getInitialSearchResults = getInitialSearchResults;
 exports.setupTracking = setupTracking;

package/dist/lupaSearch.mjs

@@ -4695,10 +4695,12 @@ const useSearchResultStore = defineStore("searchResult", () => {
         pageSize: searchResult.value.limit || 0
       };
     }
-    setDocumentTitle(
-      (_b = (_a = optionsStore.searchResultOptions) == null ? void 0 : _a.labels) == null ? void 0 : _b.htmlTitleTemplate,
-      newSearchResult.searchText
-    );
+    if (typeof document !== "undefined") {
+      setDocumentTitle(
+        (_b = (_a = optionsStore.searchResultOptions) == null ? void 0 : _a.labels) == null ? void 0 : _b.htmlTitleTemplate,
+        newSearchResult.searchText
+      );
+    }
     searchResult.value = newSearchResult;
     return { searchResult: newSearchResult };
   };
@@ -4812,6 +4814,35 @@ const getPublicQuery = (publicQuery, initialFilters, isProductList) => {
     searchText: isProductList ? "" : publicQuery.searchText
   });
 };
+const getSearchParams = (url, params, baseUrl) => {
+  let searchParams;
+  if (typeof window !== "undefined") {
+    searchParams = params || new URLSearchParams(window.location.search);
+  } else {
+    if (url) {
+      searchParams = params || new URLSearchParams(new URL(url, baseUrl).search);
+    } else {
+      throw new Error("LupaSaerch: ssr.url is required on the server side");
+    }
+  }
+  return searchParams;
+};
+const getInitialSearchResults = (options, defaultData) => __async(void 0, null, function* () {
+  var _a, _b, _c;
+  const searchParams = getSearchParams((_a = options.ssr) == null ? void 0 : _a.url, void 0, (_b = options.ssr) == null ? void 0 : _b.baseUrl);
+  const publicQuery = createPublicQuery(
+    parseParams(searchParams),
+    options.sort,
+    defaultData == null ? void 0 : defaultData.pageSize
+  );
+  const query = getPublicQuery(publicQuery, (_c = defaultData == null ? void 0 : defaultData.filters) != null ? _c : {}, false);
+  try {
+    const result = yield LupaSearchSdk.query(options.queryKey, query, options.options);
+    return result;
+  } catch (e) {
+    options.options.onError(e);
+  }
+});
 const _hoisted_1$N = {
   key: 0,
   id: "lupa-search-results-did-you-mean"
@@ -9116,7 +9147,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     options: {},
     initialFilters: {},
     isProductList: { type: Boolean },
-    isContainer: { type: Boolean }
+    isContainer: { type: Boolean },
+    initialData: {}
   },
   setup(__props) {
     const props = __props;
@@ -9222,7 +9254,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       screenStore.setScreenWidth({ width: window.innerWidth });
     };
     const handleUrlChange = (params) => {
-      const searchParams = params || new URLSearchParams(window.location.search);
+      var _a;
+      const searchParams = getSearchParams((_a = props.options.ssr) == null ? void 0 : _a.url, params);
       const publicQuery = createPublicQuery(
         parseParams(searchParams),
         props.options.sort,
@@ -9242,15 +9275,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         }
       }
       const params = new URLSearchParams(window.location.search);
-      if (!params.has(QUERY_PARAMS.QUERY)) {
+      if (!params.has(QUERY_PARAMS.QUERY) && !props.initialData) {
         handleUrlChange(params);
       }
       paramStore.add(parseParams(params));
       paramStore.setDefaultLimit(defaultSearchResultPageSize.value);
     };
-    const handleCreated = () => {
-      handleUrlChange();
-    };
     watch(searchString, () => handleParamsChange());
     const handleParamsChange = () => {
       var _a, _b;
@@ -9260,6 +9290,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         urlQueryString: searchString.value
       });
     };
+    const handleCreated = () => {
+      const initialData = props.initialData;
+      if (initialData) {
+        handleResults({ queryKey: props.options.queryKey, results: initialData });
+        searchResultStore.add(__spreadValues({}, initialData));
+      }
+    };
     handleCreated();
     return (_ctx, _cache) => {
       var _a, _b, _c, _d, _e;
@@ -15806,5 +15843,6 @@ export {
   _sfc_main$R as SearchBox,
   _sfc_main$1 as SearchContainer,
   _sfc_main$4 as SearchResults,
+  getInitialSearchResults,
   setupTracking
 };

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

@@ -1,6 +1,6 @@
 import type { PropType as __PropType } from 'vue';
 import type { SearchResultsOptions } from '../../types/search-results/SearchResultsOptions';
-import type { FilterGroup } from '@getlupa/client-sdk/Types';
+import type { FilterGroup, SearchQueryResult } from '@getlupa/client-sdk/Types';
 declare const _sfc_main: import("vue").DefineComponent<{
     options: {
         type: __PropType<SearchResultsOptions>;
@@ -18,6 +18,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: __PropType<boolean>;
         required: false;
     };
+    initialData: {
+        type: __PropType<SearchQueryResult>;
+        required: false;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     options: {
         type: __PropType<SearchResultsOptions>;
@@ -35,5 +39,9 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: __PropType<boolean>;
         required: false;
     };
+    initialData: {
+        type: __PropType<SearchQueryResult>;
+        required: false;
+    };
 }>>, {}, {}>;
 export default _sfc_main;

package/dist/src/index.d.ts

@@ -8,7 +8,7 @@ import type { SearchBoxPanelType } from './types/search-box/SearchBoxPanel';
 import type { SearchContainerOptions, SearchContainerConfigOptions } from './types/search-container/SearchContainerOptions';
 import type { BadgeType, SearchResultBadgeType, SearchResultBadgeElement, BadgeGenerateSeed, BadgeGenerateOptions, BadgeOptions } from './types/search-results/BadgeOptions';
 import type { RoutingBehavior } from './types/search-results/RoutingBehavior';
-import type { SearchResultsOptions, FacetStyle, SearchResultEventCallbacks, CallbackContext, FacetFilterQuery, SearchResultsFilterOptions, ResultFacetOptions, DynamicData } from './types/search-results/SearchResultsOptions';
+import type { SearchResultsOptions, FacetStyle, SearchResultEventCallbacks, CallbackContext, FacetFilterQuery, SearchResultsFilterOptions, ResultFacetOptions, DynamicData, SsrOptions } from './types/search-results/SearchResultsOptions';
 import type { AnchorPosition } from './types/search-results/SearchResultsProductCardOptions';
 import type { SortOptions, SearchResultsSortOptions } from './types/search-results/SearchResultsSort';
 import SearchBox from './components/search-box/SearchBox.vue';
@@ -16,9 +16,10 @@ import SearchResults from './components/search-results/SearchResults.vue';
 import ProductList from './components/product-list/ProductList.vue';
 import SearchContainer from './components/search-container/SearchContainer.vue';
 import Recommendations from './components/recommendations/Recommendations.vue';
+import { getInitialSearchResults } from './utils/ssr.utils';
 declare const setupTracking: (options: TrackingOptions) => void;
 declare const LupaSearch: {
     install: (app: any, options: any) => void;
 };
-export { SearchBox, SearchResults, ProductList, Recommendations, SearchContainer, DocumentElementType, SearchBoxPanelType, BadgeType, setupTracking, LupaSearch };
-export type { TrackingOptions, SearchBoxOptions, SearchResultsOptions, ProductListOptions, SdkOptions, FacetStyle, Environment, RoutingBehavior, AnchorPosition, SortDirection, DocumentElement, ImageDocumentElement, TitleDocumentElement, DescriptionDocumentElement, CustomDocumentElement, PriceElement, RegularPriceDocumentElement, RatingElement, AddToCartElement, CustomHtmlElement, SortOptions, SearchResultsSortOptions, SearchResultEventCallbacks, CallbackContext, FacetFilterQuery, CategoryFilterOptions, SearchResultsFilterOptions, SearchResultBadgeType, SearchResultBadgeElement, ResultFacetOptions, BadgeGenerateSeed, BadgeGenerateOptions, BadgeOptions, SearchContainerOptions, SearchContainerConfigOptions, SingleStarRatingElement, DynamicData, ProductRecommendationOptions, RecommendationABTestingOptions };
+export { SearchBox, SearchResults, ProductList, Recommendations, SearchContainer, DocumentElementType, SearchBoxPanelType, BadgeType, setupTracking, LupaSearch, getInitialSearchResults };
+export type { TrackingOptions, SearchBoxOptions, SearchResultsOptions, ProductListOptions, SdkOptions, FacetStyle, Environment, RoutingBehavior, AnchorPosition, SortDirection, DocumentElement, ImageDocumentElement, TitleDocumentElement, DescriptionDocumentElement, CustomDocumentElement, PriceElement, RegularPriceDocumentElement, RatingElement, AddToCartElement, CustomHtmlElement, SortOptions, SearchResultsSortOptions, SearchResultEventCallbacks, CallbackContext, FacetFilterQuery, CategoryFilterOptions, SearchResultsFilterOptions, SearchResultBadgeType, SearchResultBadgeElement, ResultFacetOptions, BadgeGenerateSeed, BadgeGenerateOptions, BadgeOptions, SearchContainerOptions, SearchContainerConfigOptions, SingleStarRatingElement, DynamicData, ProductRecommendationOptions, RecommendationABTestingOptions, SsrOptions };

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

@@ -11,6 +11,11 @@ export type SearchResultsOptions = SearchResultsProductOptions & SearchResultsAd
     callbacks?: SearchResultEventCallbacks;
     categories?: CategoryFilterOptions;
     dynamicData?: DynamicData;
+    ssr?: SsrOptions;
+};
+export type SsrOptions = {
+    baseUrl?: string;
+    url?: string;
 };
 export type SearchTitlePosition = 'page-top' | 'search-results-top';
 export type SearchResultsDidYouMeanLabels = {

package/dist/src/utils/ssr.utils.d.ts

@@ -0,0 +1,7 @@
+import { SearchResultsOptions } from '..';
+import { FilterGroup } from '@getlupa/client-sdk/Types';
+export declare const getSearchParams: (url?: string, params?: URLSearchParams, baseUrl?: string) => URLSearchParams;
+export declare const getInitialSearchResults: (options: SearchResultsOptions, defaultData?: {
+    filters?: FilterGroup;
+    pageSize?: number;
+}) => Promise<import("@getlupa/client-sdk/Types").SearchQueryResult | import("@getlupa/client-sdk/Types").SdkError>;

package/package.json

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