@searchstax-inc/searchstudio-ux-vue 2.0.0 → 4.1.0

package/CHANGELOG.md

@@ -0,0 +1,31 @@
+# Change Log
+
+All notable changes to the "searchstudio-ux-vue" project will be documented in this file.
+
+## [1.0.1] - 2024-10-08
+### ⚠️ BREAKING CHANGES
+- Result template needs to be updated to print variables as HTML because they now will contain html <em> tags if highlighting is enabled
+### Features
+- Added support for highlighting controlled via studio UI
+- Results per page are now configured through studio UI
+### Bug Fixes
+- Tracking calls now use unmodified title of the result
+
+## [1.0.2] - 2024-11-05
+### Bug Fixes
+- fix & and + symbols causing issues in facet values
+
+## [2.0.0]
+### Features
+- Readme updated to give more information on how widgets work
+### Bug Fixes
+- NVDA facet groups now announce state
+- NVDA added ability to jump from facets to results section
+
+## [4.1.0]
+### Bug Fixes
+- stopped making unnecessary calls on blank search page load
+- accessibility: template modified to only read result title for accessibility
+- accessibility: leave feedback button state change is now announced
+- accessibility: focus persistance added for feedback rating
+- added support for react 19

package/README.md

@@ -163,12 +163,12 @@ The SearchstaxAnswerWidget component for Vue provides an AI answer widget for yo
 **Usage**
 
 ```
-<SearchstaxAnswerWidget :showShowMoreAfterWordCount="10"></SearchstaxAnswerWidget>
+<SearchstaxAnswerWidget :showMoreAfterWordCount="10"></SearchstaxAnswerWidget>
 ```
 
 **Props**
 
-- showShowMoreAfterWordCount - number(default 100) determining after how many symbols UI will show “Read More” view.
+- showMoreAfterWordCount - number(default 100) determining after how many symbols UI will show “Read More” view.
 - feedbackWidget – an optional object that configures thumbs-up and thumbs-down feedback functionality.
 
 Example of feedbackWidget config:
@@ -194,7 +194,7 @@ It receives the following props:
 **Example**
 
 ```
-<SearchstaxAnswerWidget :showShowMoreAfterWordCount="100" :feedbackwidget="feedbackConfig">
+<SearchstaxAnswerWidget :showMoreAfterWordCount="100" :feedbackwidget="feedbackConfig">
       <template #answer="{ answerData, showMore }">
         <div v-if="answerData && answerData?.searchExecuted && answerData.shouldShowAnswer">
     <div class="searchstax-answer-wrap">
@@ -253,7 +253,6 @@ The SearchstaxInputWidget provides a search input box with autosuggest/autocompl
 - suggestAfterMinChars - default 3. Number of characters needed for autosuggest to start triggering
 - beforeAutosuggest - callback function that gets called before firing autosuggest. autosuggestProps are being passed as a property and can be modified, if passed along further search will execute with modified properties, if null is returned then event gets canceled and search never fires.
 - afterAutosuggest - callback function that gets called after autosuggest has values but before rendering. It needs to return same type of data but it can be modified.
-- inputTemplate - template override. look at examples below
 
 
 **inputWidgetTemplate**
@@ -654,9 +653,15 @@ The SearchstaxResultsWidget component displays the search results.
 **Usage**
 
 ```
-<SearchstaxResultWidget :afterLinkClick="afterLinkClick"></SearchstaxResultWidget>
+<SearchstaxResultWidget :afterLinkClick="afterLinkClick"  :renderMethod="'“pagination”'" :resultsPerPage="10"></SearchstaxResultWidget>
 ```
 
+**Props**
+
+- renderMethod – either “pagination” or “infiniteScroll”.
+- resultsPerPage – number of results on a page.
+- afterLinkClick – Callback function invoked when a result link is clicked. Allows modifying the result object.
+
 **Result Template Override**
 
 The resultsTemplate prop allows customizing the result UI.
@@ -692,6 +697,7 @@ It receives following props:
       @click="resultClicked(searchResult, $event)"
       @keyup.enter="resultClicked(searchResult, $event)"
       @keyup.space="resultClicked(searchResult, $event)"
+      aria-labelledby="title-{{searchResult.uniqueId}}"
       class="searchstax-result-item-link searchstax-result-item-link-wrapping"
       tabindex="0"
     >
@@ -715,7 +721,7 @@ It receives following props:
           class="searchstax-thumbnail"
         />
         <div class="searchstax-search-result-title-container">
-          <span class="searchstax-search-result-title" v-html="searchResult.title"></span>
+          <span class="searchstax-search-result-title" :id="'title-' + searchResult.uniqueId" v-html="searchResult.title"></span>
         </div>
         <p
           v-if="searchResult.paths"
@@ -782,7 +788,7 @@ It receives following props:
 ```
 
 
- <SearchstaxResultWidget :afterLinkClick="afterLinkClick" :renderMethod="'infiniteScroll'">
+ <SearchstaxResultWidget :afterLinkClick="afterLinkClick" :renderMethod="'infiniteScroll'" :resultsPerPage="10">
               <template #results="{ searchResults, resultClicked }">
                 <div class="searchstax-search-results" v-if="searchResults && searchResults.length">
     <a
@@ -793,6 +799,7 @@ It receives following props:
       @click="resultClicked(searchResult, $event)"
       @keyup.enter="resultClicked(searchResult, $event)"
       @keyup.space="resultClicked(searchResult, $event)"
+      aria-labelledby="title-{{searchResult.uniqueId}}"
       class="searchstax-result-item-link searchstax-result-item-link-wrapping"
       tabindex="0"
     >
@@ -816,7 +823,7 @@ It receives following props:
           class="searchstax-thumbnail"
         />
         <div class="searchstax-search-result-title-container">
-          <span class="searchstax-search-result-title" v-html="searchResult.title"></span>
+          <span class="searchstax-search-result-title" :id="'title-' + searchResult.uniqueId" v-html="searchResult.title"></span>
         </div>
         <p
           v-if="searchResult.paths"
@@ -880,6 +887,8 @@ It receives following props:
 
 ```
 
+
+
 ### Pagination Widget ###
 
 The SearchStax Site Search solution offers a Vue pagination widget to assist with you custom search page.

package/README.mustache

@@ -163,12 +163,12 @@ The SearchstaxAnswerWidget component for Vue provides an AI answer widget for yo
 **Usage**
 
 ```
-<SearchstaxAnswerWidget :showShowMoreAfterWordCount="10"></SearchstaxAnswerWidget>
+<SearchstaxAnswerWidget :showMoreAfterWordCount="10"></SearchstaxAnswerWidget>
 ```
 
 **Props**
 
-- showShowMoreAfterWordCount - number(default 100) determining after how many symbols UI will show “Read More” view.
+- showMoreAfterWordCount - number(default 100) determining after how many symbols UI will show “Read More” view.
 - feedbackWidget – an optional object that configures thumbs-up and thumbs-down feedback functionality.
 
 Example of feedbackWidget config:
@@ -194,7 +194,7 @@ It receives the following props:
 **Example**
 
 ```
-<SearchstaxAnswerWidget :showShowMoreAfterWordCount="100" :feedbackwidget="feedbackConfig">
+<SearchstaxAnswerWidget :showMoreAfterWordCount="100" :feedbackwidget="feedbackConfig">
       <template #answer="{ answerData, showMore }">
         {{&SearchstaxAnswerWidget}}
       </template>
@@ -221,7 +221,6 @@ The SearchstaxInputWidget provides a search input box with autosuggest/autocompl
 - suggestAfterMinChars - default 3. Number of characters needed for autosuggest to start triggering
 - beforeAutosuggest - callback function that gets called before firing autosuggest. autosuggestProps are being passed as a property and can be modified, if passed along further search will execute with modified properties, if null is returned then event gets canceled and search never fires.
 - afterAutosuggest - callback function that gets called after autosuggest has values but before rendering. It needs to return same type of data but it can be modified.
-- inputTemplate - template override. look at examples below
 
 
 **inputWidgetTemplate**
@@ -314,9 +313,15 @@ The SearchstaxResultsWidget component displays the search results.
 **Usage**
 
 ```
-<SearchstaxResultWidget :afterLinkClick="afterLinkClick"></SearchstaxResultWidget>
+<SearchstaxResultWidget :afterLinkClick="afterLinkClick"  :renderMethod="'“pagination”'" :resultsPerPage="10"></SearchstaxResultWidget>
 ```
 
+**Props**
+
+- renderMethod – either “pagination” or “infiniteScroll”.
+- resultsPerPage – number of results on a page.
+- afterLinkClick – Callback function invoked when a result link is clicked. Allows modifying the result object.
+
 **Result Template Override**
 
 The resultsTemplate prop allows customizing the result UI.
@@ -355,7 +360,7 @@ It receives following props:
 ```
 
 
- <SearchstaxResultWidget :afterLinkClick="afterLinkClick" :renderMethod="'infiniteScroll'">
+ <SearchstaxResultWidget :afterLinkClick="afterLinkClick" :renderMethod="'infiniteScroll'" :resultsPerPage="10">
               <template #results="{ searchResults, resultClicked }">
                 {{&SearchstaxResultWidgetDefault}}
               </template>
@@ -366,6 +371,8 @@ It receives following props:
 
 ```
 
+
+
 ### Pagination Widget ###
 
 The SearchStax Site Search solution offers a Vue pagination widget to assist with you custom search page.

package/dist/@searchstax-inc/components/SearchstaxAnswerWidget.vue.d.ts

@@ -1,7 +1,7 @@
 import type { PropType } from 'vue';
 import type { ISearchstaxAnswerData, IFeedbackWidgetProperties } from '@searchstax-inc/searchstudio-ux-js';
 declare const _sfc_main: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    showShowMoreAfterWordCount: {
+    showMoreAfterWordCount: {
         type: PropType<number>;
         required: false;
     };
@@ -18,7 +18,7 @@ declare const _sfc_main: import("vue").DefineComponent<import("vue").ExtractProp
     attachObservables(): void;
     showMore(event: Event): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    showShowMoreAfterWordCount: {
+    showMoreAfterWordCount: {
         type: PropType<number>;
         required: false;
     };

package/dist/@searchstax-inc/components/SearchstaxFacetsWidget.vue.d.ts

@@ -4444,6 +4444,7 @@ declare const _sfc_main: import("vue").DefineComponent<import("vue").ExtractProp
                 deactivatedFacets: {
                     [key: string]: boolean;
                 };
+                focusedElement: HTMLInputElement;
                 cachedData: {
                     facets: {
                         values: ({
@@ -17491,7 +17492,7 @@ declare const _sfc_main: import("vue").DefineComponent<import("vue").ExtractProp
                             template: string;
                         };
                     };
-                    showShowMoreAfterWordCount?: number;
+                    showMoreAfterWordCount?: number;
                     feedbackwidget?: {
                         renderFeedbackWidget?: boolean;
                         emailOverride?: () => string;

package/dist/@searchstax-inc/components/SearchstaxFacetsWidget.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchstaxFacetsWidget.vue.d.ts","sourceRoot":"","sources":["../../src/components/SearchstaxFacetsWidget.vue"],"names":[],"mappings":"AACA,cAAc,6HAA6H,CAAC;;AAwE5I,wBAAiF"}
+{"version":3,"file":"SearchstaxFacetsWidget.vue.d.ts","sourceRoot":"","sources":["../../src/components/SearchstaxFacetsWidget.vue"],"names":[],"mappings":"AACA,cAAc,6HAA6H,CAAC;;AA2E5I,wBAAiF"}

package/dist/@searchstax-inc/components/SearchstaxResultWidget.vue.d.ts

@@ -9,6 +9,10 @@ declare const _sfc_main: import("vue").DefineComponent<import("vue").ExtractProp
         type: PropType<"infiniteScroll" | "pagination">;
         required: false;
     };
+    resultsPerPage: {
+        type: NumberConstructor;
+        required: false;
+    };
 }>, {}, {
     searchResults: ISearchstaxParsedResult[];
     metadata: ISearchstaxSearchMetadata;
@@ -4437,6 +4441,7 @@ declare const _sfc_main: import("vue").DefineComponent<import("vue").ExtractProp
                 deactivatedFacets: {
                     [key: string]: boolean;
                 };
+                focusedElement: HTMLInputElement;
                 cachedData: {
                     facets: {
                         values: ({
@@ -17484,7 +17489,7 @@ declare const _sfc_main: import("vue").DefineComponent<import("vue").ExtractProp
                             template: string;
                         };
                     };
-                    showShowMoreAfterWordCount?: number;
+                    showMoreAfterWordCount?: number;
                     feedbackwidget?: {
                         renderFeedbackWidget?: boolean;
                         emailOverride?: () => string;
@@ -19684,5 +19689,9 @@ declare const _sfc_main: import("vue").DefineComponent<import("vue").ExtractProp
         type: PropType<"infiniteScroll" | "pagination">;
         required: false;
     };
+    resultsPerPage: {
+        type: NumberConstructor;
+        required: false;
+    };
 }>> & Readonly<{}>, {}, {}, undefined, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _sfc_main;

package/dist/@searchstax-inc/components/SearchstaxSearchFeedbackWidget.vue.d.ts

@@ -7,5 +7,5 @@ declare const _sfc_main: import("vue").DefineComponent<{}, {}, {
 }, {
     onOriginalQueryClick(e: Event): void;
     attachObservables(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, undefined, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _sfc_main;

package/dist/@searchstax-inc/components/SearchstaxSortingWidget.vue.d.ts

@@ -8,5 +8,5 @@ declare const _sfc_main: import("vue").DefineComponent<{}, {}, {
 }, {
     orderChange(event: Event): void;
     attachObservables(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, undefined, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _sfc_main;

package/dist/@searchstax-inc/components/templates/SearchstaxResultWidgetDefaultTemplate.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchstaxResultWidgetDefaultTemplate.vue.d.ts","sourceRoot":"","sources":["../../../src/components/templates/SearchstaxResultWidgetDefaultTemplate.vue"],"names":[],"mappings":"AACA,cAAc,sJAAsJ,CAAC;;AAiGrK,wBAAiF"}
+{"version":3,"file":"SearchstaxResultWidgetDefaultTemplate.vue.d.ts","sourceRoot":"","sources":["../../../src/components/templates/SearchstaxResultWidgetDefaultTemplate.vue"],"names":[],"mappings":"AACA,cAAc,sJAAsJ,CAAC;;AAmGrK,wBAAiF"}