@empathyco/x-components 6.0.0-alpha.190 → 6.0.0-alpha.191

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-alpha.191 (2026-01-22)
+
+* docs: Update x-modules components documentation (1/6) (#1963) ([7b236fc](https://github.com/empathyco/x/commit/7b236fc)), closes [#1963](https://github.com/empathyco/x/issues/1963)
+
+
+
+
+
 ## 6.0.0-alpha.190 (2026-01-21)
 
 * docs: Update common components documentation (#1962) ([9c51d49](https://github.com/empathyco/x/commit/9c51d49)), closes [#1962](https://github.com/empathyco/x/issues/1962)

package/docs/API-reference/components/ai/x-components.ai-overview.md

@@ -32,3 +32,67 @@ title: AiOverview
 | <code>sliding-panels-right-button</code> |                        | None                                      |
 | <code>result</code>                      | (required) result card |                                           |
 | <code>suggestions-extra-content</code>   |                        | None                                      |
+
+## AI Overview Examples
+
+The `ai-overview` component provides an AI-generated summary and suggestions for queries.
+
+### Basic usage
+
+```vue
+<template>
+  <AiOverview
+    :title="'AI Overview'"
+    :title-loading="'Generating with Empathy AI'"
+    :expand-text="'Show more'"
+    :collapse-text="'Show less'"
+    :content-classes="'my-content-class'"
+    :sliding-panels-classes="'my-sliding-panel-class'"
+    :sliding-panel-containers-classes="'my-sliding-panel-container-class'"
+    :sliding-panel-buttons-classes="'my-sliding-panel-button-class'"
+  >
+    <template #result="{ result }">
+      <ResultCard :result="result" />
+    </template>
+  </AiOverview>
+</template>
+
+<script setup>
+import AiOverview from '@empathyco/x-components/js/x-modules/ai/components/ai-overview.vue'
+import ResultCard from './ResultCard.vue'
+</script>
+```
+
+### Customizing slots
+
+You can customize the loading title, extra content, and sliding panel slots:
+
+```vue
+<template>
+  <AiOverview
+    :title="'AI Overview'"
+    :title-loading="'Loading... Please wait'"
+    :expand-text="'Show more'"
+    :collapse-text="'Show less'"
+  >
+    <template #title-loading>
+      <span>Custom loading title...</span>
+    </template>
+    <template #extra-content>
+      <div>Extra content below the main overview</div>
+    </template>
+    <template #sliding-panels-addons="{ arrivedState }">
+      <span v-if="arrivedState.left">Left end reached</span>
+      <span v-if="arrivedState.right">Right end reached</span>
+    </template>
+    <template #result="{ result }">
+      <ResultCard :result="result" />
+    </template>
+  </AiOverview>
+</template>
+
+<script setup>
+import AiOverview from '@empathyco/x-components/js/x-modules/ai/components/ai-overview.vue'
+import ResultCard from './ResultCard.vue'
+</script>
+```

package/docs/API-reference/components/device/x-components.device-detector.md

@@ -35,28 +35,21 @@ _Try resizing the browser window!_
 <template>
   <div>
     <DeviceDetector :breakpoints="breakpoints" />
-    {{ $x.device }}
+    {{ x.device }}
   </div>
 </template>
 
-<script>
+<script setup>
+import { reactive } from 'vue'
 import { DeviceDetector } from '@empathyco/x-components/device'
-
-export default {
-  name: 'DeviceDemo',
-  components: {
-    DeviceDetector,
-  },
-  data() {
-    return {
-      breakpoints: {
-        mobile: 600,
-        tablet: 900,
-        desktop: Number.POSITIVE_INFINITY,
-      },
-    }
-  },
-}
+import { use$x } from '../../../composables/use-$x'
+
+const x = use$x()
+const breakpoints = reactive({
+  mobile: 600,
+  tablet: 900,
+  desktop: Number.POSITIVE_INFINITY,
+})
 </script>
 ```
 
@@ -71,35 +64,28 @@ _Try resizing the window to check that it never changes_
 <template>
   <div>
     <DeviceDetector force="mobile" :breakpoints="breakpoints" />
-    {{ $x.device }}
+    {{ x.device }}
   </div>
 </template>
 
-<script>
+<script setup>
+import { reactive } from 'vue'
 import { DeviceDetector } from '@empathyco/x-components/device'
-
-export default {
-  name: 'DeviceDemo',
-  components: {
-    DeviceDetector,
-  },
-  data() {
-    return {
-      breakpoints: {
-        mobile: 600,
-        tablet: 900,
-        desktop: Number.POSITIVE_INFINITY,
-      },
-    }
-  },
-}
+import { use$x } from '../../../composables/use-$x'
+
+const x = use$x()
+const breakpoints = reactive({
+  mobile: 600,
+  tablet: 900,
+  desktop: Number.POSITIVE_INFINITY,
+})
 </script>
 ```
 
 ### Play with events
 
 In this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the
-payload. This device is stored in a data variable and then displayed.
+payload. This device is stored in a ref and then displayed.
 
 _Try resizing the browser window!_
 
@@ -111,29 +97,17 @@ _Try resizing the browser window!_
   </div>
 </template>
 
-<script>
+<script setup>
 import { DeviceDetector } from '@empathyco/x-components/device'
-
-export default {
-  name: 'DeviceDemo',
-  components: {
-    DeviceDetector,
-  },
-  data() {
-    return {
-      device: 'unknown',
-      breakpoints: {
-        mobile: 600,
-        tablet: 900,
-        desktop: Number.POSITIVE_INFINITY,
-      },
-    }
-  },
-  methods: {
-    storeDevice(device) {
-      this.device = device
-    },
-  },
+import { reactive, ref } from 'vue'
+const device = ref('unknown')
+const breakpoints = reactive({
+  mobile: 600,
+  tablet: 900,
+  desktop: Number.POSITIVE_INFINITY,
+})
+function storeDevice(newDevice) {
+  device.value = newDevice
 }
 </script>
 ```

package/docs/API-reference/components/empathize/x-components.empathize.md

@@ -43,71 +43,103 @@ This component will listen to the configured events in `eventsToOpenEmpathize` a
 are:
 
 - Open: `UserFocusedSearchBox`, `UserIsTypingAQuery`, `UserClickedSearchBox`
-- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter` and 'UserBlurredSearchBox`
+- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnterKey`, `UserBlurredSearchBox`
 
-### Basic examples
+### Basic example
 
 The component rendering the query suggestions, popular searches and history queries with keyboard
 navigation.
 
 ```vue
-<Empathize>
-  <template #default>
+<template>
+  <Empathize>
     <BaseKeyboardNavigation>
-      <QuerySuggestions/>
-      <PopularSearches/>
-      <HistoryQueries/>
+      <QuerySuggestions />
+      <PopularSearches />
+      <HistoryQueries />
     </BaseKeyboardNavigation>
-  </template>
-</Empathize>
+  </Empathize>
+</template>
+
+<script setup>
+import Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'
+import BaseKeyboardNavigation from '@empathyco/x-components/js/components/base-keyboard-navigation.vue'
+import QuerySuggestions from '@empathyco/x-components/js/x-modules/query-suggestions/components/query-suggestions.vue'
+import PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'
+import HistoryQueries from '@empathyco/x-components/js/x-modules/history-queries/components/history-queries.vue'
+</script>
 ```
 
-Defining custom values for the events to open and close the Empathize. For example opening it when
+Defining custom values for the events to open and close the Empathize. For example, opening it when
 the search box loses the focus and closing it when the search box receives the focus:
 
 ```vue
-<Empathize
-  :eventsToOpenEmpathize="['UserBlurredSearchBox']"
-  :eventsToCloseEmpathize="['UserFocusedSearchBox']"
->
-  <template #default>
+<template>
+  <Empathize
+    :events-to-open-empathize="['UserBlurredSearchBox']"
+    :events-to-close-empathize="['UserFocusedSearchBox']"
+  >
     Please, type a query in the Search Box.
-  </template>
-</Empathize>
+  </Empathize>
+</template>
+
+<script setup>
+import Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'
+</script>
 ```
 
-An animation can be used for the opening and closing using the `animation` prop. The animation, must
-be a Component with a `Transition` with a slot inside:
+An animation can be used for the opening and closing using the `animation` prop. The animation must
+be a component with a `Transition` and a slot inside:
 
 ```vue
-<Empathize :animation="collapseFromTop">
-  <template #default>
-    <PopularSearches/>
-  </template>
-</Empathize>
+<template>
+  <Empathize :animation="collapseFromTop">
+    <PopularSearches />
+  </Empathize>
+</template>
+
+<script setup>
+import Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'
+import PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'
+import CollapseFromTop from './collapseFromTop.vue'
+const animation = CollapseFromTop
+</script>
 ```
 
-### Advance examples
+### Advanced example
 
 The component rendering the query suggestions, popular searches and history queries with keyboard
 navigation. It also configures `searchAndCloseOnNoContent` to trigger a search and close the empathize
-when has no-content as fallback behaviour. To do that, `hasContent` prop must be reactive to know
-if the empathize has content or not.
-It also configures `searchAndCloseDebounceInMs` to 500ms as debounce time to search and close the
-empathize when has no-content.
+when it has no content as fallback behaviour. To do that, `hasContent` prop must be reactive to know
+if the empathize has content or not. It also configures `searchAndCloseDebounceInMs` to 500ms as debounce time to search and close the empathize when it has no content.
 
 ```vue
-<Empathize
-  :animation="empathizeAnimation"
-  :events-to-close-empathize="empathizeCloseEvents"
-  :has-content="showEmpathize"
-  :search-and-close-debounce-in-ms="500"
-  search-and-close-on-no-content
->
-  <BaseKeyboardNavigation>
-    <QuerySuggestions/>
-    <PopularSearches/>
-    <HistoryQueries/>
-  </BaseKeyboardNavigation>
-</Empathize>
+<template>
+  <Empathize
+    :animation="empathizeAnimation"
+    :events-to-close-empathize="empathizeCloseEvents"
+    :has-content="showEmpathize"
+    :search-and-close-debounce-in-ms="500"
+    search-and-close-on-no-content
+  >
+    <BaseKeyboardNavigation>
+      <QuerySuggestions />
+      <PopularSearches />
+      <HistoryQueries />
+    </BaseKeyboardNavigation>
+  </Empathize>
+</template>
+
+<script setup>
+import Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'
+import BaseKeyboardNavigation from '@empathyco/x-components/js/components/base-keyboard-navigation.vue'
+import QuerySuggestions from '@empathyco/x-components/js/x-modules/query-suggestions/components/query-suggestions.vue'
+import PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'
+import HistoryQueries from '@empathyco/x-components/js/x-modules/history-queries/components/history-queries.vue'
+import CollapseFromTop from './collapseFromTop.vue'
+import { ref } from 'vue'
+const empathizeAnimation = CollapseFromTop
+const empathizeCloseEvents = ['UserClosedEmpathize', 'UserSelectedASuggestion']
+const showEmpathize = ref(true)
+</script>
 ```

package/docs/API-reference/components/experience-controls/x-components.experience-controls.md

@@ -17,14 +17,8 @@ This component will fire the events received in the `ExperienceControlsEventsCha
 <template>
   <ExperienceControls />
 </template>
-<script>
-import { ExperienceControls } from '@empathyco/x-components/experience-controls'
 
-export default {
-  name: 'ExperienceControlsDemo',
-  components: {
-    ExperienceControls,
-  },
-}
+<script setup>
+import { ExperienceControls } from '@empathyco/x-components/experience-controls'
 </script>
 ```

package/docs/API-reference/components/identifier-results/x-components.identifier-result.md

@@ -18,10 +18,20 @@ query from the state. Receives as prop the @empathyco/x-types#Result data.
 ## Examples
 
 This component renders an identifier result value and highlights its matching part with the query
-from the state. Receives as prop the result data
+from the state. Receives as prop the result data.
 
-### Basic usage:
+### Basic usage
 
 ```vue
-<IdentifierResult v-bind="{ result }" />
+<template>
+  <IdentifierResult :result="result" />
+</template>
+
+<script setup>
+import IdentifierResult from '@empathyco/x-components/js/x-modules/identifier-results/components/identifier-result.vue'
+const result = {
+  identifier: { value: 'ABC-123-XYZ' },
+  // ...other result properties
+}
+</script>
 ```

package/docs/API-reference/components/identifier-results/x-components.identifier-results.md

@@ -25,22 +25,33 @@ other component.
 
 ## Examples
 
-### Play with slot
-
 A IdentifierResult **must** be used inside the IdentifierResults component. In the example below the
 BaseResultLink is used as a wrapper and its default slot is filled with the IdentifierResult
 component.
 
+### Play with slot
+
 ```vue
-<IdentifierResults :animation="fadeAndSlide">
-  <template #default="{ identifierResult }">
-    <BaseResultLink :result="identifierResult">
-      <template #default="{ result }">
-        <IdentifierResult :result="result"/>
-      </template>
-    </BaseResultLink>
-  </template>
-</IdentifierResults>
+<template>
+  <IdentifierResults :animation="animation">
+    <template #default="{ identifierResult }">
+      <BaseResultLink :result="identifierResult">
+        <template #default="{ result }">
+          <IdentifierResult :result="result" />
+        </template>
+      </BaseResultLink>
+    </template>
+  </IdentifierResults>
+</template>
+
+<script setup>
+import IdentifierResults from '@empathyco/x-components/js/x-modules/identifier-results/components/identifier-results.vue'
+import IdentifierResult from '@empathyco/x-components/js/x-modules/identifier-results/components/identifier-result.vue'
+import BaseResultLink from '@empathyco/x-components/js/components/base-result-link.vue'
+import FadeAndSlide from '@empathyco/x-components/js/animations/fade-and-slide.vue'
+
+const animation = FadeAndSlide
+</script>
 ```
 
 ### Play with props
@@ -49,20 +60,15 @@ In this example, the identifier results have been limited to render a maximum of
 
 ```vue
 <template>
-  <IdentifierResults #default="{ identifierResult }" :maxItemsToRender="3">
-    <IdentifierResult :result="identifierResult" />
+  <IdentifierResults :max-items-to-render="3">
+    <template #default="{ identifierResult }">
+      <IdentifierResult :result="identifierResult" />
+    </template>
   </IdentifierResults>
 </template>
 
-<script>
-import { IdentifierResults, IdentifierResult } from '@empathyco/x-components'
-
-export default {
-  name: 'IdentifierResultsDemo',
-  components: {
-    IdentifierResults,
-    IdentifierResult,
-  },
-}
+<script setup>
+import IdentifierResults from '@empathyco/x-components/js/x-modules/identifier-results/components/identifier-results.vue'
+import IdentifierResult from '@empathyco/x-components/js/x-modules/identifier-results/components/identifier-result.vue'
 </script>
 ```

package/docs/API-reference/components/next-queries/x-components.next-query.md

@@ -38,12 +38,12 @@ A list of events that the component will emit:
 
 ## Examples
 
-This components expects just a suggestion as a prop to be rendered. It has a slot to override the
+This component expects just a suggestion as a prop to be rendered. It has a slot to override the
 content. By default, it renders the suggestion query of the next query. It also has an optional
 prop, `highlightCurated`, to indicate if the curated Next Queries should be differentiated with a
 CSS class.
 
-### Basic Usage
+### Basic usage
 
 Using default slot:
 
@@ -52,28 +52,18 @@ Using default slot:
   <NextQuery :suggestion="suggestion" />
 </template>
 
-<script>
+<script setup>
 import { NextQuery } from '@empathyco/x-components/next-queries'
-
-export default {
-  name: 'NextQueryDemo',
-  components: {
-    NextQuery,
-  },
-  data() {
-    return {
-      suggestion: {
-        modelName: 'NextQuery',
-        query: 'tshirt',
-        facets: [],
-      },
-    }
-  },
-}
+import { ref } from 'vue'
+const suggestion = ref({
+  modelName: 'NextQuery',
+  query: 'tshirt',
+  facets: [],
+})
 </script>
 ```
 
-### Overriding default slot.
+### Overriding default slot
 
 The default slot allows you to replace the content of the suggestion button.
 
@@ -87,25 +77,14 @@ The default slot allows you to replace the content of the suggestion button.
   </NextQuery>
 </template>
 
-<script>
+<script setup>
 import { NextQuery } from '@empathyco/x-components/next-queries'
 import { TrendingIcon } from '@empathyco/x-components'
-
-export default {
-  name: 'NextQueryDemo',
-  components: {
-    NextQuery,
-    TrendingIcon,
-  },
-  data() {
-    return {
-      suggestion: {
-        modelName: 'NextQuery',
-        query: 'tshirt',
-        facets: [],
-      },
-    }
-  },
-}
+import { ref } from 'vue'
+const suggestion = ref({
+  modelName: 'NextQuery',
+  query: 'tshirt',
+  facets: [],
+})
 </script>
 ```

package/docs/API-reference/components/popular-searches/x-components.popular-search.md

@@ -32,37 +32,28 @@ A list of events that the component will emit:
 
 ## Examples
 
-This components expects just a suggestion as a prop to be rendered. It has a slot to override the
+This component expects just a suggestion as a prop to be rendered. It has a slot to override the
 content. By default, it renders the suggestion query of the popular search.
 
-### Basic Usage
+### Basic usage
 
 ```vue live
 <template>
   <PopularSearch :suggestion="suggestion" />
 </template>
 
-<script>
+<script setup>
 import { PopularSearch } from '@empathyco/x-components/popular-searches'
-export default {
-  name: 'PopularSearchDemo',
-  components: {
-    PopularSearch,
-  },
-  data() {
-    return {
-      suggestion: {
-        modelName: 'PopularSearch',
-        query: 'tshirt',
-        facets: [],
-      },
-    }
-  },
-}
+import { ref } from 'vue'
+const suggestion = ref({
+  modelName: 'PopularSearch',
+  query: 'tshirt',
+  facets: [],
+})
 </script>
 ```
 
-### Custom Usage
+### Custom usage
 
 ```vue live
 <template>
@@ -74,25 +65,14 @@ export default {
   </PopularSearch>
 </template>
 
-<script>
+<script setup>
 import { PopularSearch } from '@empathyco/x-components/popular-searches'
 import { TrendingIcon } from '@empathyco/x-components'
-
-export default {
-  name: 'PopularSearchDemo',
-  components: {
-    PopularSearch,
-    TrendingIcon,
-  },
-  data() {
-    return {
-      suggestion: {
-        modelName: 'PopularSearch',
-        query: 'tshirt',
-        facets: [],
-      },
-    }
-  },
-}
+import { ref } from 'vue'
+const suggestion = ref({
+  modelName: 'PopularSearch',
+  query: 'tshirt',
+  facets: [],
+})
 </script>
 ```