@empathyco/x-components 6.0.0-alpha.6 → 6.0.0-alpha.61

package/docs/API-reference/components/common/x-components.base-teleport.md

@@ -0,0 +1,19 @@
+---
+
+title: BaseTeleport
+
+---
+
+# BaseTeleport
+
+## Props
+
+| Name                | Description | Type                | Default       |
+| ------------------- | ----------- | ------------------- | ------------- |
+| <code>target</code> |             | <code>string</code> | <code></code> |
+
+## Slots
+
+| Name                 | Description | Bindings<br />(name - type - description) |
+| -------------------- | ----------- | ----------------------------------------- |
+| <code>default</code> |             | None                                      |

package/docs/API-reference/components/common/x-components.display-click-provider.md

@@ -0,0 +1,17 @@
+---
+
+title: DisplayClickProvider
+
+---
+
+# DisplayClickProvider
+
+## Props
+
+| Name                                | Description | Type                        | Default                |
+| ----------------------------------- | ----------- | --------------------------- | ---------------------- |
+| <code>resultFeature</code>          |             | <code>ResultFeature</code>  | <code></code>          |
+| <code>ignoreResultClickEvent</code> |             | <code>boolean</code>        | <code>false</code>     |
+| <code>toolingDisplayTagging</code>  |             | <code>TaggingRequest</code> | <code>undefined</code> |
+| <code>toolingAdd2CartTagging</code> |             | <code>TaggingRequest</code> | <code>undefined</code> |
+| <code>queryTagging</code>           |             | <code>TaggingRequest</code> | <code>undefined</code> |

package/docs/API-reference/components/common/x-components.items-list.md

@@ -13,7 +13,7 @@ It renders a list of ListItem providing a slot for each `slotName` which depends
 
 | Name                   | Description                                                | Type                       | Default           |
 | ---------------------- | ---------------------------------------------------------- | -------------------------- | ----------------- |
-| <code>animation</code> | Animation component that will be used to animate the list. | <code>animationProp</code> | <code>'ul'</code> |
+| <code>animation</code> | Animation component that will be used to animate the list. | <code>AnimationProp</code> | <code>'ul'</code> |
 | <code>items</code>     | List of items.                                             | <code>ListItem[]</code>    | <code></code>     |
 | <code>itemClass</code> | Item's classes.                                            | <code>string</code>        | <code></code>     |
 

package/docs/API-reference/components/common/x-components.page-selector.md

@@ -0,0 +1,136 @@
+---
+
+title: PageSelector
+
+---
+
+# PageSelector
+
+Component that renders a pagination control with buttons for navigating between pages. It displays
+the current page, allows selecting other pages, and emits events when a page is selected.
+
+## Props
+
+| Name                       | Description                                                                 | Type                                                                                                     | Default                    |
+| -------------------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | -------------------------- |
+| <code>buttonClasses</code> | CSS classes to customize the prev/next buttons.                             | <code>(string \| Dictionary<boolean>)[]</code>                                                           | <code>() => []</code>      |
+| <code>currentPage</code>   | The current page number.                                                    | <code>number</code>                                                                                      | <code></code>              |
+| <code>hiddenPage</code>    | The string content of the hidden pages.                                     | <code>string</code>                                                                                      | <code>'...'</code>         |
+| <code>itemClasses</code>   | CSS classes to customize the page items.                                    | <code>(isSelected: boolean) => string \| Dictionary<boolean> \| (string \| Dictionary<boolean>)[]</code> | <code>() => []</code>      |
+| <code>range</code>         | The number of pages to show before and after the current page.              | <code>number</code>                                                                                      | <code>2</code>             |
+| <code>scrollTarget</code>  | The class of the scroll container to scroll to top when a page is selected. | <code>string</code>                                                                                      | <code>'main-scroll'</code> |
+| <code>totalPages</code>    | The total number of pages.                                                  | <code>number</code>                                                                                      | <code></code>              |
+
+## Slots
+
+| Name                              | Description | Bindings<br />(name - type - description) |
+| --------------------------------- | ----------- | ----------------------------------------- |
+| <code>previous-page-button</code> |             | None                                      |
+| <code>page-button</code>          |             | <br />                                    |
+| <code>next-page-button</code>     |             | None                                      |
+
+## Events
+
+This component emits the "UserSelectedAPage" and the UserClickedScrollToTop events by default.
+
+## See it in action
+
+Basic example of how the component is rendered.
+
+```vue live
+<template>
+  <PageSelector :current-page="page" :total-pages="totalPages" />
+</template>
+
+<script>
+  import { PageSelector } from '@empathyco/x-components';
+
+  export default {
+    name: 'PageSelectorDemo',
+    components: {
+      PageSelector
+    },
+    data() {
+      return {
+        page: 0,
+        totalPages: 10
+      };
+    }
+  };
+</script>
+```
+
+### Customize the slots
+
+This component allows to customise its content using slots.
+
+```vue live
+<template>
+  <PageSelector
+    :total-pages="totalPages"
+    :currentPage="page"
+    :item-classes="
+      (isSelected: boolean) =>
+        isSelected
+          ? 'x-button-lead x-text-neutral-10'
+          : 'x-text-neutral-90 x-button-outlined'
+    "
+    :buttonClasses="['x-rounded-md']"
+  >
+    <template #previous-page-button>
+      <span>Back</span>
+    </template>
+    <template #page-button="{ page, isSelected }">
+      <h2 :class="{ 'x-text1': !isSelected }">
+        {{ page }}
+      </h2>
+    </template>
+    <template #next-page-button>
+      <span>Forward</span>
+    </template>
+  </PageSelector>
+</template>
+
+<script>
+  import { PageSelector } from '@empathyco/x-components';
+
+  export default {
+    name: 'PageSelectorDemo',
+    components: {
+      PageSelector
+    },
+    data() {
+      return {
+        page: 2,
+        totalPages: 10
+      };
+    }
+  };
+</script>
+```
+
+### Customize the number of pages to show before and after the current page by changing the range default value.
+
+```vue live
+<template>
+  <PageSelector :current-page="page" :total-pages="totalPages" :range="range" />
+</template>
+
+<script>
+  import { PageSelector } from '@empathyco/x-components';
+
+  export default {
+    name: 'PageSelectorDemo',
+    components: {
+      PageSelector
+    },
+    data() {
+      return {
+        page: 6,
+        totalPages: 100,
+        range: 4
+      };
+    }
+  };
+</script>
+```

package/docs/API-reference/components/common/x-components.sliding-panel.md

@@ -14,13 +14,13 @@ Additionally, this component exposes the following props to modify the classes o
 
 ## Props
 
-| Name                              | Description                                                                                                         | Type                 | Default           |
-| --------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -------------------- | ----------------- |
-| <code>scrollFactor</code>         | Scroll factor that will dictate how much the scroll moves when pressing a navigation button.                        | <code>number</code>  | <code>0.7</code>  |
-| <code>showButtons</code>          | Would make the navigation buttons visible when they're needed or always hide them.                                  | <code>boolean</code> | <code>true</code> |
-| <code>resetOnContentChange</code> | When true, whenever the DOM content in the sliding panel slot changes, it will reset<br />the scroll position to 0. | <code>boolean</code> | <code>true</code> |
-| <code>buttonClass</code>          |                                                                                                                     | <code>string</code>  | <code></code>     |
-| <code>scrollContainerClass</code> |                                                                                                                     | <code>string</code>  | <code></code>     |
+| Name                              | Description                                                                                                         | Type                       | Default           |
+| --------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -------------------------- | ----------------- |
+| <code>scrollFactor</code>         | Scroll factor that will dictate how much the scroll moves when pressing a navigation button.                        | <code>number</code>        | <code>0.7</code>  |
+| <code>showButtons</code>          | Would make the navigation buttons visible when they're needed or always hide them.                                  | <code>boolean</code>       | <code>true</code> |
+| <code>resetOnContentChange</code> | When true, whenever the DOM content in the sliding panel slot changes, it will reset<br />the scroll position to 0. | <code>boolean</code>       | <code>true</code> |
+| <code>buttonClass</code>          |                                                                                                                     | <code>VueCSSClasses</code> | <code></code>     |
+| <code>scrollContainerClass</code> |                                                                                                                     | <code>VueCSSClasses</code> | <code></code>     |
 
 ## Slots
 

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

@@ -19,7 +19,7 @@ differently based on their purpose and this can be achieved using the exposed sl
 | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------------- |
 | <code>facetsIds</code>        | Array of facets ids used to get the selected filters for those facets.                                                                                                                                                                                                              | <code>Array<Facet['id']></code> | <code></code>     |
 | <code>alwaysVisible</code>    | Flag to render the component even if there are no filters selected.                                                                                                                                                                                                                 | <code>boolean</code>            | <code></code>     |
-| <code>animation</code>        | Animation component that will be used to animate the facets.                                                                                                                                                                                                                        | <code>animationProp</code>      | <code>'ul'</code> |
+| <code>animation</code>        | Animation component that will be used to animate the facets.                                                                                                                                                                                                                        | <code>AnimationProp</code>      | <code>'ul'</code> |
 | <code>renderableFacets</code> | Discriminates the facets rendered by this component. It expects a string containing facets<br />ids, comma separated. This property will include or exclude facets based on its value.<br />The default value is an empty string and the component will render all existing facets. | <code>string</code>             | <code></code>     |
 
 ## Slots

package/docs/API-reference/components/facets/x-components.lists/selected-filters-list.md

@@ -20,7 +20,7 @@ The property "alwaysVisible" handles if the component is rendered if no filters
 | -------------------------- | --------------------------------------------------------------------------- | ------------------------------- | ----------------- |
 | <code>facetsIds</code>     | Array of facets ids used to get the selected filters for those facets.      | <code>Array<Facet['id']></code> | <code></code>     |
 | <code>alwaysVisible</code> | Flag to render the component even if there are no filters selected.         | <code>boolean</code>            | <code></code>     |
-| <code>animation</code>     | Animation component that will be used to animate the selected filters list. | <code>animationProp</code>      | <code>'ul'</code> |
+| <code>animation</code>     | Animation component that will be used to animate the selected filters list. | <code>AnimationProp</code>      | <code>'ul'</code> |
 
 ## Slots
 

package/docs/API-reference/components/related-prompts/x-components.related-prompt.md

@@ -0,0 +1,22 @@
+---
+
+title: RelatedPrompt
+
+---
+
+# RelatedPrompt
+
+This component shows a suggested related prompt.
+
+## Props
+
+| Name                       | Description | Type                       | Default            |
+| -------------------------- | ----------- | -------------------------- | ------------------ |
+| <code>relatedPrompt</code> |             | <code>RelatedPrompt</code> | <code></code>      |
+| <code>selected</code>      |             | <code>boolean</code>       | <code>false</code> |
+
+## Slots
+
+| Name                                      | Description | Bindings<br />(name - type - description) |
+| ----------------------------------------- | ----------- | ----------------------------------------- |
+| <code>related-prompt-extra-content</code> |             |                                           |

package/docs/API-reference/components/related-prompts/x-components.related-prompts-list.md

@@ -0,0 +1,196 @@
+---
+
+title: RelatedPromptsList
+
+---
+
+# RelatedPromptsList
+
+Component that inserts groups of related prompts in different positions of the injected search items
+list, based on the provided configuration.
+
+## Props
+
+| Name                                   | Description                                                                                                            | Type                       | Default                |
+| -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | -------------------------- | ---------------------- |
+| <code>animation</code>                 | Animation component that will be used to animate the related prompts groups.                                           | <code>AnimationProp</code> | <code>'ul'</code>      |
+| <code>offset</code>                    | The first index to insert a group of related prompts at.                                                               | <code>number</code>        | <code>24</code>        |
+| <code>frequency</code>                 | The items cycle size to keep inserting related prompts groups at.                                                      | <code>number</code>        | <code>24</code>        |
+| <code>maxRelatedPromptsPerGroup</code> | The maximum amount of related prompts to add in a single group.                                                        | <code>number</code>        | <code>4</code>         |
+| <code>maxGroups</code>                 | The maximum number of groups to insert into the injected list items list.                                              | <code>number</code>        | <code>undefined</code> |
+| <code>showOnlyAfterOffset</code>       | Determines if a group is added to the injected items list in case the number<br />of items is smaller than the offset. | <code>boolean</code>       | <code>false</code>     |
+
+## Events
+
+This component emits no events.
+
+## See it in action
+
+  <!-- prettier-ignore-start -->
+
+:::warning Backend microservice required To use this component, the <b>QuerySignals</b> microservice
+must be implemented. :::
+
+  <!-- prettier-ignore-end -->
+
+Usually, this component is going to be used together with the `ResultsList` one. Related prompts
+groups will be inserted between the results, guiding users to discover new searches directly from
+the results list.
+
+```vue live
+<template>
+  <div>
+    <SearchInput />
+    <ResultsList>
+      <RelatedPromptsList />
+    </ResultsList>
+  </div>
+</template>
+
+<script>
+  import { RelatedPromptsList } from '@empathyco/x-components/related-prompts';
+  import { ResultsList } from '@empathyco/x-components/search';
+  import { SearchInput } from '@empathyco/x-components/search-box';
+
+  export default {
+    name: 'RelatedPromptsListDemo',
+    components: {
+      RelatedPromptsList,
+      ResultsList,
+      SearchInput
+    }
+  };
+</script>
+```
+
+### Play with the index that related prompts groups are inserted at
+
+The component allows to customise where are the related prompts groups inserted. In the following
+example, the first group of related prompts will be inserted at the index `48` (`offset`), and then
+a second group will be inserted at index `120` because of the `frequency` prop configured to `72`.
+Finally, a third group will be inserted at index `192`. Because `maxGroups` is configured to `3`, no
+more groups will be inserted. Each one of this groups will have up to `6` related prompts
+(`maxRelatedPromptsPerGroup`).
+
+```vue live
+<template>
+  <div>
+    <SearchInput />
+    <ResultsList>
+      <RelatedPromptsList
+        :offset="48"
+        :frequency="72"
+        :maxRelatedPromptsPerGroup="6"
+        :maxGroups="3"
+      />
+    </ResultsList>
+  </div>
+</template>
+
+<script>
+  import { RelatedPromptsList } from '@empathyco/x-components/related-prompts';
+  import { ResultsList } from '@empathyco/x-components/search';
+  import { SearchInput } from '@empathyco/x-components/search-box';
+
+  export default {
+    name: 'RelatedPromptsListDemo',
+    components: {
+      RelatedPromptsList,
+      ResultsList,
+      SearchInput
+    }
+  };
+</script>
+```
+
+### Showing/hiding first related prompts group when no more items
+
+By default, the first related prompts group will be inserted when the total number of results is
+smaller than the offset, but this behavior can be deactivated by setting the `showOnlyAfterOffset`
+to `true`.
+
+```vue live
+<template>
+  <div>
+    <SearchInput />
+    <ResultsList>
+      <RelatedPromptsList
+        :offset="48"
+        :frequency="72"
+        :maxRelatedPromptsPerGroup="1"
+        :showOnlyAfterOffset="true"
+      />
+    </ResultsList>
+  </div>
+</template>
+
+<script>
+  import { RelatedPromptsList } from '@empathyco/x-components/related-prompts';
+  import { ResultsList } from '@empathyco/x-components/search';
+  import { SearchInput } from '@empathyco/x-components/search-box';
+
+  export default {
+    name: 'RelatedPromptsListDemo',
+    components: {
+      RelatedPromptsList,
+      ResultsList,
+      SearchInput
+    }
+  };
+</script>
+```
+
+### Customise the layout of the component
+
+This component will render by default the `id` of each search item, both the injected, and for the
+groups of related prompts generated, but the common case is to integrate it with another layout
+component, for example the `BaseGrid`. To do so, you can use the `default` slot
+
+```vue
+<template>
+  <div>
+    <SearchInput />
+    <ResultsList>
+      <RelatedPromptsList
+        :offset="48"
+        :frequency="72"
+        :maxRelatedPromptsPerGroup="6"
+        :maxGroups="3"
+        #default="{ items }"
+      >
+        <BaseGrid :items="items" :animation="animation">
+          <template #related-prompts-group="{ item }">
+            <span v-for="const prompt of items.relatedPrompts">
+              RelatedPromptsGroup:
+              <pre>{{ prompt }}</pre>
+            </span>
+          </template>
+          <template #result="{ item }">
+            <span>Result: {{ item.name }}</span>
+          </template>
+          <template #default="{ item }">
+            <span>Default: {{ item }}</span>
+          </template>
+        </BaseGrid>
+      </RelatedPromptsList>
+    </ResultsList>
+  </div>
+</template>
+
+<script>
+  import { RelatedPromptsList } from '@empathyco/x-components/related-prompts';
+  import { ResultsList } from '@empathyco/x-components/search';
+  import { SearchInput } from '@empathyco/x-components/search-box';
+  import { BaseGrid } from '@empathyco/x-components';
+
+  export default {
+    name: 'RelatedPromptsListDemo',
+    components: {
+      RelatedPromptsLis,
+      ResultsList,
+      BaseGrid,
+      SearchInput
+    }
+  };
+</script>
+```

package/docs/API-reference/components/related-prompts/x-components.related-prompts-tag-list.md

@@ -0,0 +1,32 @@
+---
+
+title: RelatedPromptsTagList
+
+---
+
+# RelatedPromptsTagList
+
+This component shows the list of `RelatedPrompts` components.
+
+If the default slot is reimplemented in the consumer, `onSelect` function will be necessary to
+handle the selection of the related prompt and to trigger the stagger-fade-slide animation.
+
+## Props
+
+| Name                               | Description                                                                                                                                                                         | Type                  | Default           |
+| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------------- |
+| <code>buttonClass</code>           | The CSS class for the left and right button of the sliding panel.                                                                                                                   | <code>string</code>   | <code></code>     |
+| <code>showButtons</code>           | The boolean prop to handle the visiblity of sliding pannel buttons.                                                                                                                 | <code>boolean</code>  | <code>true</code> |
+| <code>scrollContainerClass</code>  | The CSS class for the wrapper of all the related prompt wrapper elements.                                                                                                           | <code>string</code>   | <code></code>     |
+| <code>tagClass</code>              | The CSS class for all the related prompt wrapper elements.                                                                                                                          | <code>string</code>   | <code></code>     |
+| <code>tagColors</code>             | Array of colors to apply to the related prompts. It will be applied to tag<br />elements cyclically according to their index in the nex way: `tagColors[index % tagColors.length]`. | <code>string[]</code> | <code></code>     |
+| <code>animationDurationInMs</code> | The duration of the total animation in milliseconds.                                                                                                                                | <code>number</code>   | <code>700</code>  |
+
+## Slots
+
+| Name                                      | Description                                                        | Bindings<br />(name - type - description) |
+| ----------------------------------------- | ------------------------------------------------------------------ | ----------------------------------------- |
+| <code>sliding-panel-left-button</code>    | The button to be displayed on the left side of the sliding panel.  | None                                      |
+| <code>default</code>                      | - The slot to render related prompt information.                   | <br /><br />                              |
+| <code>related-prompt-extra-content</code> |                                                                    |                                           |
+| <code>sliding-panel-right-button</code>   | The button to be displayed on the right side of the sliding panel. | None                                      |

package/docs/API-reference/components/search/x-components.results-list.md

@@ -17,7 +17,7 @@ result bound.
 
 | Name                   | Description                                                   | Type                       | Default           |
 | ---------------------- | ------------------------------------------------------------- | -------------------------- | ----------------- |
-| <code>animation</code> | Animation component that will be used to animate the results. | <code>animationProp</code> | <code>'ul'</code> |
+| <code>animation</code> | Animation component that will be used to animate the results. | <code>AnimationProp</code> | <code>'ul'</code> |
 
 ## Events
 

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

@@ -12,13 +12,13 @@ It allows you to activate or deactivate the session id management through the `c
 
 ## Props
 
-| Name                                   | Description                                                                                                                                                | Type                 | Default            |
-| -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ------------------ |
-| <code>clickedResultStorageTTLMs</code> | The TTL in milliseconds for storing the clicked result info.                                                                                               | <code>number</code>  | <code>30000</code> |
-| <code>clickedResultStorageKey</code>   | The Object key of the @empathyco/x-types#Result clicked by the user<br />that will be used as id for the storage. By default, the Result url will be used. | <code>string</code>  | <code>'url'</code> |
-| <code>sessionTTLMs</code>              | The session TTL in milliseconds.                                                                                                                           | <code>number</code>  | <code></code>      |
-| <code>queryTaggingDebounceMs</code>    | The debounce time in milliseconds to track the query.                                                                                                      | <code>number</code>  | <code>2000</code>  |
-| <code>consent</code>                   | The consent to be emitted.                                                                                                                                 | <code>boolean</code> | <code>null</code>  |
+| Name                                | Description                                                                                                                                                                          | Type                 | Default            |
+| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------- | ------------------ |
+| <code>storageTTLMs</code>           | The TTL in milliseconds for storing the result info.                                                                                                                                 | <code>number</code>  | <code>30000</code> |
+| <code>storageKey</code>             | The Object key of the @empathyco/x-types#Result clicked or added to the cart by the user<br />that will be used as id for the storage.<br />By default, the Result url will be used. | <code>string</code>  | <code>'url'</code> |
+| <code>sessionTTLMs</code>           | The session TTL in milliseconds.                                                                                                                                                     | <code>number</code>  | <code></code>      |
+| <code>queryTaggingDebounceMs</code> | The debounce time in milliseconds to track the query.                                                                                                                                | <code>number</code>  | <code>2000</code>  |
+| <code>consent</code>                | The consent to be emitted.                                                                                                                                                           | <code>boolean</code> | <code>null</code>  |
 
 ## Events
 
@@ -53,13 +53,12 @@ doesn't render elements to the DOM.
 
 In this example, the `Tagging` component will emit `ConsentProvided` with payload false by default
 if the consent is not provided, the `TaggingConfigProvided` event will be emitted only if the props
-`queryTaggingDebounceMs`, `sessionDurationMs`, `clickedResultStorageTTLMs` or
-`clickedResultStorageKey`are defined.
+`queryTaggingDebounceMs`, `sessionDurationMs`, `storageTTLMs` or `storageKey`are defined.
 
-Every time the user clicks a result the information for the clicked product will be stored on the
-browser during 30 seconds which is the default value for the prop `clickedResultStorageTTLMs`. To
-distinguish the storage information for the different results the product url will be used since
-`clickedResultStorageKey` default value is 'url'.
+Every time the user clicks a result or adds a result to the cart, the information for the product
+will be stored on the browser during 30 seconds which is the default value for the prop
+`storageTTLMs`. To distinguish the storage information for the different results the product url
+will be used since `storageKey` default value is 'url'.
 
 ```vue
 <template>
@@ -78,12 +77,12 @@ distinguish the storage information for the different results the product url wi
 </script>
 ```
 
-In this example, the clicked result information will be stored on the browser during 60 seconds and
-the product id will be used as storage key.
+In this example, the clicked or added to cart result information will be stored on the browser
+during 60 seconds and the product id will be used as storage key
 
 ```vue
 <template>
-  <Tagging :clickedResultStorageTTLMs="60000" :clickedResultStorageKey="'id'" />
+  <Tagging :storageTTLMs="60000" :storageKey="'id'" />
 </template>
 
 <script>

package/js/components/animations/fade-and-slide.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './fade-and-slide.vue2.js';
-import { openBlock, createBlock, TransitionGroup, withCtx, createCommentVNode, renderSlot } from 'vue';
+import { openBlock, createBlock, TransitionGroup, withCtx, renderSlot } from 'vue';
 import './fade-and-slide.vue3.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
@@ -11,7 +11,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     appear: _ctx.appear
   }, {
     default: withCtx(() => [
-      createCommentVNode(" @slot (Required) Transition-group content "),
       renderSlot(_ctx.$slots, "default")
     ]),
     _: 3

package/js/components/animations/fade-and-slide.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"fade-and-slide.vue.js","sources":["../../../../src/components/animations/fade-and-slide.vue"],"sourcesContent":["<template>\n  <transition-group class=\"x-fade-and-slide\" :name=\"name\" :tag=\"tag\" :appear=\"appear\">\n    <!-- @slot (Required) Transition-group content -->\n    <slot />\n  </transition-group>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { useDisableAnimation } from './use-disable-animation';\n\n  /**\n   * Renders a transition group wrapping the elements passed in the default slot and animating\n   * them with a fade and slide animation.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'FadeAndSlide',\n    props: {\n      /**\n       * HTML Element that the transition-group children will be wrapped in.\n       */\n      tag: String,\n      /**\n       * Indicates if the transition must be applied on the initial render of the node.\n       */\n      appear: {\n        type: Boolean,\n        default: true\n      }\n    },\n    setup: function () {\n      /**\n       * The name of the animation.\n       */\n      const animationName = 'x-fade-and-slide-';\n\n      const { name } = useDisableAnimation(animationName);\n\n      return { name };\n    }\n  });\n</script>\n\n<style lang=\"css\">\n  .x-fade-and-slide--move,\n  .x-fade-and-slide--enter-active,\n  .x-fade-and-slide--leave-active {\n    transition: opacity 0.2s ease-out, transform 0.3s ease-out;\n  }\n\n  .x-fade-and-slide--enter-from,\n  .x-fade-and-slide--leave-to {\n    transform: translate(-20%, 0);\n    opacity: 0;\n  }\n\n  .x-fade-and-slide--leave-active {\n    position: absolute;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe FadeAndSlide component is intended to be used as a prop in animatable components but also works\nas a wrapper of a transition group that can receive the tag it will render to as a prop.\n\nUsed as a prop in an animatable component:\n\n```vue\n<AnimatableComponent :animation=\"FadeAndSlide\" />\n```\n\nUsed as a regular component passing a the tag as prop:\n\n```vue\n<FadeAndSlide tag=\"ul\">\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n</FadeAndSlide>\n```\n</docs>\n"],"names":["name","_createBlock","_TransitionGroup","tag","appear","_withCtx","_createCommentVNode","_renderSlot"],"mappings":";;;;;AACyB,SAAA,WAAA,CAAC,IAAkB,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SAAQA,SAAI,EAAA,EAAAC,WAAA,CAAAC,eAAA,EAAA;AAAA,IAAG,KAAKC,EAAAA,kBAAAA;AAAAA,IAAM,MAAM,IAAEC,CAAAA,IAAAA;AAAAA,IAAAA,GAAAA,EAAAA,IAAAA,CAAAA,GAAAA;AAD9E,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;aAGIC,OAAQ,CAAA,MAAA;AAAA,MAAAC,kBAAA,CAAA,6CAAA,CAAA;AAHZ,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"fade-and-slide.vue.js","sources":["../../../../src/components/animations/fade-and-slide.vue"],"sourcesContent":["<template>\n  <transition-group class=\"x-fade-and-slide\" :name=\"name\" :tag=\"tag\" :appear=\"appear\">\n    <!-- @slot (Required) Transition-group content -->\n    <slot />\n  </transition-group>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { useDisableAnimation } from './use-disable-animation';\n\n  /**\n   * Renders a transition group wrapping the elements passed in the default slot and animating\n   * them with a fade and slide animation.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'FadeAndSlide',\n    props: {\n      /**\n       * HTML Element that the transition-group children will be wrapped in.\n       */\n      tag: String,\n      /**\n       * Indicates if the transition must be applied on the initial render of the node.\n       */\n      appear: {\n        type: Boolean,\n        default: true\n      }\n    },\n    setup: function () {\n      /**\n       * The name of the animation.\n       */\n      const animationName = 'x-fade-and-slide-';\n\n      const { name } = useDisableAnimation(animationName);\n\n      return { name };\n    }\n  });\n</script>\n\n<style lang=\"css\">\n  .x-fade-and-slide--move,\n  .x-fade-and-slide--enter-active,\n  .x-fade-and-slide--leave-active {\n    transition: opacity 0.2s ease-out, transform 0.3s ease-out;\n  }\n\n  .x-fade-and-slide--enter-from,\n  .x-fade-and-slide--leave-to {\n    transform: translate(-20%, 0);\n    opacity: 0;\n  }\n\n  .x-fade-and-slide--leave-active {\n    position: absolute;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe FadeAndSlide component is intended to be used as a prop in animatable components but also works\nas a wrapper of a transition group that can receive the tag it will render to as a prop.\n\nUsed as a prop in an animatable component:\n\n```vue\n<AnimatableComponent :animation=\"FadeAndSlide\" />\n```\n\nUsed as a regular component passing a the tag as prop:\n\n```vue\n<FadeAndSlide tag=\"ul\">\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n</FadeAndSlide>\n```\n</docs>\n"],"names":["name","_createBlock","_TransitionGroup","tag","appear","_renderSlot"],"mappings":";;;;;AACyB,SAAA,WAAA,CAAC,IAAkB,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SAAQA,SAAI,EAAA,EAAAC,WAAA,CAAAC,eAAA,EAAA;AAAA,IAAG,KAAKC,EAAAA,kBAAAA;AAAAA,IAAM,MAAM,IAAEC,CAAAA,IAAAA;AAAAA,IAAAA,GAAAA,EAAAA,IAAAA,CAAAA,GAAAA;AAD9E,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/base-dropdown.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './base-dropdown.vue2.js';
-import { openBlock, createElementBlock, withKeys, withModifiers, normalizeClass, createElementVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString, createBlock, resolveDynamicComponent, withCtx, withDirectives, Fragment, renderList, vShow } from 'vue';
+import { openBlock, createElementBlock, withKeys, withModifiers, normalizeClass, createElementVNode, renderSlot, createTextVNode, toDisplayString, createBlock, resolveDynamicComponent, withCtx, withDirectives, Fragment, renderList, vShow } from 'vue';
 import './base-dropdown.vue3.js';
 import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 
@@ -32,7 +32,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-label": _ctx.ariaLabel,
         "aria-autocomplete": "none"
       }, [
-        createCommentVNode("\n       @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n       the item slot as fallback.\n       @binding {string|number|Identifiable} item - The item data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n     "),
         _ctx.hasToggleSlot ? renderSlot(_ctx.$slots, "toggle", {
           key: 0,
           isOpen: _ctx.isOpen,
@@ -85,7 +84,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                     "data-test": "dropdown-item",
                     role: "option"
                   }, [
-                    createCommentVNode("\n               @slot (required) Used to render each one of the items content, and as fallback\n               for the toggle button content slot if it is not provided.\n               @binding {string|number|Identifiable} item - Item to render\n               @binding {boolean} isHighlighted - True when the item has the focus.\n               @binding {boolean} isSelected - True when the item is selected.\n             "),
                     renderSlot(_ctx.$slots, "item", {
                       isHighlighted: index === _ctx.highlightedItemIndex,
                       isSelected: item === _ctx.modelValue,