npm - @empathyco/x-components - Versions diffs - 5.0.0-alpha.21 → 5.0.0-alpha.23 - Mend

@empathyco/x-components 5.0.0-alpha.21 → 5.0.0-alpha.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

package/docs/API-reference/api/x-components.basemodal.md CHANGED Viewed

@@ -2,35 +2,61 @@
 [Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseModal](./x-components.basemodal.md)
-## BaseModal class
+## BaseModal variable
 Base component with no XPlugin dependencies that serves as a utility for constructing more complex modals.
 **Signature:**
 ```typescript
-export default class BaseModal extends BaseModal_base
+_default: import("vue").DefineComponent<{
+    open: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    focusOnOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    referenceSelector: StringConstructor;
+    animation: {
+        type: PropType<string | import("vue").VueConstructor<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>>>;
+        default: () => import("vue").DefineComponent<{}, () => import("vue").VNode | import("vue").VNode[], {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    };
+    overlayAnimation: {
+        type: PropType<string | import("vue").VueConstructor<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>>>;
+        default: () => import("vue").VueConstructor<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>>;
+    };
+    contentClass: StringConstructor;
+    overlayClass: StringConstructor;
+}, {
+    emitOverlayClicked: (event: MouseEvent) => void;
+    isWaitingForLeave: import("vue").Ref<boolean>;
+    modalContentRef: import("vue").Ref<HTMLDivElement | undefined>;
+    modalRef: import("vue").Ref<HTMLDivElement | undefined>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, ("click:overlay" | "focusin:body")[], string, Readonly<import("vue").ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    focusOnOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    referenceSelector: StringConstructor;
+    animation: {
+        type: PropType<string | import("vue").VueConstructor<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>>>;
+        default: () => import("vue").DefineComponent<{}, () => import("vue").VNode | import("vue").VNode[], {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    };
+    overlayAnimation: {
+        type: PropType<string | import("vue").VueConstructor<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>>>;
+        default: () => import("vue").VueConstructor<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>>;
+    };
+    contentClass: StringConstructor;
+    overlayClass: StringConstructor;
+}>>, {
+    focusOnOpen: boolean;
+    animation: string | import("vue").VueConstructor<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>>;
+    overlayAnimation: string | import("vue").VueConstructor<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>>;
+}>
 ```
-**Extends:** BaseModal\_base
-## Properties
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [$refs](./x-components.basemodal._refs.md) |  | { modal: HTMLDivElement; modalContent: HTMLDivElement; } |  |
-|  [animation](./x-components.basemodal.animation.md) |  | Vue \| string | Animation to use for opening/closing the modal. This animation only affects the content. |
-|  [focusOnOpen](./x-components.basemodal.focusonopen.md) |  | boolean | Determines if the focused element changes to one inside the modal when it opens. Either the first element with a positive tabindex or just the first focusable element. |
-|  [isWaitingForLeave](./x-components.basemodal.iswaitingforleave.md) | <code>protected</code> | boolean | Boolean to delay the leave animation until it has completed. |
-|  [open](./x-components.basemodal.open.md) |  | boolean | Determines if the modal is open or not. |
-|  [overlayAnimation](./x-components.basemodal.overlayanimation.md) |  | Vue \| string | Animation to use for the overlay (backdrop) part of the modal. By default, it uses a fade transition. |
-|  [previousBodyOverflow](./x-components.basemodal.previousbodyoverflow.md) | <code>protected</code> | string | The previous value of the body overflow style. |
-|  [previousHTMLOverflow](./x-components.basemodal.previoushtmloverflow.md) | <code>protected</code> | string | The previous value of the HTML element overflow style. |
-|  [referenceElement](./x-components.basemodal.referenceelement.md) | <code>protected</code> | HTMLElement | The reference element to use to find the modal's position. |
-|  [referenceSelector?](./x-components.basemodal.referenceselector.md) |  | string | _(Optional)_ The reference selector of a DOM element to use as reference to position the modal. This selector can be an ID or a class, if it is a class, it will use the first element that matches. |
-## Methods
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [mounted()](./x-components.basemodal.mounted.md) | <code>protected</code> |  |

package/docs/API-reference/api/x-components.basevariablecolumngrid.md CHANGED Viewed

@@ -2,21 +2,40 @@
 [Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseVariableColumnGrid](./x-components.basevariablecolumngrid.md)
-## BaseVariableColumnGrid class
+## BaseVariableColumnGrid variable
 The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the selected number of columns to the grid. It also allows to customize the grid items using the available `scopedSlots`<!-- -->.
 **Signature:**
 ```typescript
-export default class BaseVariableColumnGrid extends Vue
+_default: import("vue").DefineComponent<{
+    animation: {
+        type: PropType<string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
+        default: string;
+    };
+    items: PropType<ListItem[]>;
+    columns: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    columnsToRender: import("vue").ComputedRef<number>;
+    slots: import("vue/types/v3-setup-context").Slots;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    animation: {
+        type: PropType<string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
+        default: string;
+    };
+    items: PropType<ListItem[]>;
+    columns: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    animation: string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}> | (import("vue/types/v3-component-public-instance").ComponentPublicInstanceConstructor<import("vue/types/v3-component-public-instance").Vue3Instance<{}, Readonly<import("vue").ExtractPropTypes<{}>>, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, true, import("vue/types/v3-component-options").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, any>> & Readonly<Readonly<import("vue").ExtractPropTypes<{}>>> & import("vue").ShallowUnwrapRef<{}> & import("vue/types/v3-component-options").ExtractComputedReturns<import("vue").ComponentComputedOptions> & import("vue").ComponentMethodOptions & import("vue").ComponentCustomProperties & Readonly<import("vue").ExtractPropTypes<{}>>, any, any, any, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions> & import("vue/types/v3-component-options").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, {}> & {
+        props: {};
+    });
+    columns: number;
+}>
 ```
-**Extends:** Vue
-## Properties
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [animation](./x-components.basevariablecolumngrid.animation.md) | <code>protected</code> | Vue \| string | Animation component that will be used to animate the grid. |
-|  [items?](./x-components.basevariablecolumngrid.items.md) | <code>protected</code> | [ListItem](./x-components.listitem.md)<!-- -->\[\] | _(Optional)_ The list of items to be rendered. |

package/docs/API-reference/api/x-components.md CHANGED Viewed

@@ -19,10 +19,8 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [BaseIdTogglePanel](./x-components.baseidtogglepanel.md) | <p>Simple panel that could receives its initial open state via prop, if not the default is opens and a required prop, named <code>panelId</code>, which are responsible of rendering default slot inside a configurable transition.</p><p>It reacts to <code>UserClickedPanelToggleButton</code> event, when their payload matches the component's 'panelId' prop, to handle its open/close state.</p><p>The default slot offers the possibility to customise the modal content.</p> |
 |  [BaseIdTogglePanelButton](./x-components.baseidtogglepanelbutton.md) | <p>Component containing an event button that emits [XEventsTypes.UserClickedPanelToggleButton](./x-components.xeventstypes.userclickedpaneltogglebutton.md) when clicked with the panelId as payload.</p><p>It has a default slot to customize its contents.</p> |
 |  [BaseKeyboardNavigation](./x-components.basekeyboardnavigation.md) | Base component to handle keyboard navigation for elements inside it. It has a required slot to include the navigable elements. |
-|  [BaseModal](./x-components.basemodal.md) | Base component with no XPlugin dependencies that serves as a utility for constructing more complex modals. |
 |  [BaseSuggestions](./x-components.basesuggestions.md) | Paints a list of suggestions passed in by prop. Requires a component for a single suggestion in the default slot for working. |
 |  [BaseTabsPanel](./x-components.basetabspanel.md) | Base Tabs Panel. |
-|  [BaseVariableColumnGrid](./x-components.basevariablecolumngrid.md) | The <code>BaseVariableColumnGrid</code> component is a wrapper of the <code>BaseGrid</code> component that listens to the <code>UserClickedColumnPicker</code> and the <code>ColumnsNumberProvided</code> events and passes the selected number of columns to the grid. It also allows to customize the grid items using the available <code>scopedSlots</code>. |
 |  [BaseXAPI](./x-components.basexapi.md) | Default implementation for [XAPI](./x-components.xapi.md)<!-- -->. |
 |  [ClearHistoryQueries](./x-components.clearhistoryqueries.md) | A button that when is pressed, emits the [HistoryQueriesXEvents.UserPressedClearHistoryQueries](./x-components.historyqueriesxevents.userpressedclearhistoryqueries.md) event, expressing the user intention to clear the whole history of queries. |
 |  [DefaultFacetsService](./x-components.defaultfacetsservice.md) | Default implementation for the [FacetsService](./x-components.facetsservice.md)<!-- -->. |
@@ -70,7 +68,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [SemanticQueries](./x-components.semanticqueries.md) | Retrieves a list of semantic queries from the state and exposes them in the slots. |
 |  [SemanticQuery](./x-components.semanticquery.md) | This component renders a semantic query. A semantic query is a recommended query that is similar in its meaning to another one. It contains the query and the distance, which indicates how similar the query is compared to the searched query. |
 |  [SimpleFilter](./x-components.simplefilter.md) | Renders a simple filter, emitting the needed events when clicked. |
-|  [SlidingPanel](./x-components.slidingpanel.md) | <p>This component allows for any other component or element inside it to be horizontally navigable. It also implements customizable buttons as well as other minor customizations to its general behavior.</p><p>Additionally, this component exposes the following props to modify the classes of the elements: <code>buttonClass</code>.</p> |
 |  [SnippetConfigExtraParams](./x-components.snippetconfigextraparams.md) | Extracts the extra parameters from the [SnippetConfig](./x-components.snippetconfig.md) and syncs it with the request objects of every x-module. |
 |  [Spellcheck](./x-components.spellcheck.md) | <p>The <code>Spellcheck</code> component allows to inform the user with a friendly message that he might have misspelled the search query. This message can be set using the default slot of the component, which gives access to the searched query using the <code>query</code> scope property, and the spellchecked query proposal, using the <code>spellcheckedQuery</code> scope property.</p><p>The component will only render itself if the <code>spellcheckedQuery</code> property has value.</p> |
 |  [SpellcheckButton](./x-components.spellcheckbutton.md) | A button that when pressed emits the [XEventsTypes.UserAcceptedAQuery](./x-components.xeventstypes.useracceptedaquery.md) and [XEventsTypes.UserAcceptedSpellcheckQuery](./x-components.xeventstypes.useracceptedspellcheckquery.md) events, expressing the user intention to set the spellchecked query. |
@@ -371,6 +368,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [BaseGrid](./x-components.basegrid.md) | Grid component that is able to render different items based on their modelName value. In order to achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not have modelName property, the default slot is used instead. It has a required property: the <code>items</code> to render; and an optional one: the number <code>columns</code> the grid is divided in. If the number of columns is not specified, the grid automatically fills the rows with as many columns as it can fit. |
 |  [BaseIdModalClose](./x-components.baseidmodalclose.md) | Component that allows to close a modal by emitting [XEventsTypes.UserClickedCloseModal](./x-components.xeventstypes.userclickedclosemodal.md)<!-- -->. It allows full customization with the 'closing-element' slot and exposes the 'closeModal' function. |
 |  [BaseIdModalOpen](./x-components.baseidmodalopen.md) | Component that allows to open a modal by emitting [XEventsTypes.UserClickedOpenModal](./x-components.xeventstypes.userclickedopenmodal.md) with the modalId as payload. It allows full customization with the 'opening-element' slot and exposes the 'openModal' function. |
+|  [BaseModal](./x-components.basemodal.md) | Base component with no XPlugin dependencies that serves as a utility for constructing more complex modals. |
 |  [BasePlaceholderImage](./x-components.baseplaceholderimage.md) |  |
 |  [BasePriceFilterLabel](./x-components.basepricefilterlabel.md) | Renders a label for a price filter, allowing to select different messages depending on the value of the filter. |
 |  [BaseRating](./x-components.baserating.md) | Rating component. This component renders a set of elements filled based on the value passed as prop. |
@@ -384,6 +382,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [BaseSuggestion](./x-components.basesuggestion.md) | <p>Renders a button with a default slot. It receives a query, which should be the query of the module using this component, a suggestion, the [XEvent](./x-components.xevent.md) that will be emitted on click with a given feature.</p><p>The default slot receives the suggestion and the matched query has props.</p> |
 |  [BaseSwitch](./x-components.baseswitch.md) | Basic switch component to handle boolean values. This component receives its selected state using a prop, and emits a Vue event whenever the user clicks it. |
 |  [BaseTogglePanel](./x-components.basetogglepanel.md) | Simple panel that receives its open state via prop, which is responsible of rendering default slot inside a configurable transition. |
+|  [BaseVariableColumnGrid](./x-components.basevariablecolumngrid.md) | The <code>BaseVariableColumnGrid</code> component is a wrapper of the <code>BaseGrid</code> component that listens to the <code>UserClickedColumnPicker</code> and the <code>ColumnsNumberProvided</code> events and passes the selected number of columns to the grid. It also allows to customize the grid items using the available <code>scopedSlots</code>. |
 |  [bus](./x-components.bus.md) | Default  implementation. |
 |  [cancelFetchAndSaveControls](./x-components.cancelfetchandsavecontrols.md) | Default implementation for fetchAndSaveExperienceControls action. |
 |  [cancelFetchAndSaveIdentifierResults](./x-components.cancelfetchandsaveidentifierresults.md) | Default implementation for [IdentifierResultsActions.cancelFetchAndSaveIdentifierResults()](./x-components.identifierresultsactions.cancelfetchandsaveidentifierresults.md) action. |
@@ -670,6 +669,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [ShowIcon](./x-components.showicon.md) |  |
 |  [SingleColumnLayout](./x-components.singlecolumnlayout.md) | Component for use as Layout to be filled with the rest of the Components. |
 |  [SlicedFilters](./x-components.slicedfilters.md) | Component that slices a list of filters and returns them using the default scoped slot, allowing the user to show the full list of them or slicing them again using the show more/less buttons. |
+|  [SlidingPanel](./x-components.slidingpanel.md) | <p>This component allows for any other component or element inside it to be horizontally navigable. It also implements customizable buttons as well as other minor customizations to its general behavior.</p><p>Additionally, this component exposes the following props to modify the classes of the elements: <code>buttonClass</code>.</p> |
 |  [SnippetCallbacks](./x-components.snippetcallbacks.md) | This component subscribes to any [XEvent](./x-components.xevent.md) with a custom callbacks provided by the snippet configuration. |
 |  [SortAZIcon](./x-components.sortazicon.md) |  |
 |  [SortDropdown](./x-components.sortdropdown.md) | The <code>SortDropdown</code> component allows user to select the search results order. This component also allows to change the selected sort programmatically. |

package/docs/API-reference/api/x-components.slidingpanel.md CHANGED Viewed

@@ -2,7 +2,7 @@
 [Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [SlidingPanel](./x-components.slidingpanel.md)
-## SlidingPanel class
+## SlidingPanel variable
 This component allows for any other component or element inside it to be horizontally navigable. It also implements customizable buttons as well as other minor customizations to its general behavior.
@@ -11,15 +11,49 @@ Additionally, this component exposes the following props to modify the classes o
 **Signature:**
 ```typescript
-export default class SlidingPanel extends SlidingPanel_base
+_default: import("vue").DefineComponent<{
+    scrollFactor: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showButtons: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    resetOnContentChange: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    buttonClass: StringConstructor;
+    scrollContainerClass: StringConstructor;
+}, {
+    cssClasses: import("vue").ComputedRef<{
+        'x-sliding-panel-at-start': boolean;
+        'x-sliding-panel-at-end': boolean;
+    }>;
+    debouncedUpdateScroll: import("..").DebouncedFunction<[]>;
+    scrollContainerRef: import("vue").Ref<HTMLDivElement | undefined>;
+    scrollLeft: () => void;
+    scrollRight: () => void;
+    slots: import("vue/types/v3-setup-context").Slots;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    scrollFactor: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showButtons: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    resetOnContentChange: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    buttonClass: StringConstructor;
+    scrollContainerClass: StringConstructor;
+}>>, {
+    scrollFactor: number;
+    showButtons: boolean;
+    resetOnContentChange: boolean;
+}>
 ```
-**Extends:** SlidingPanel\_base
-## Properties
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [resetOnContentChange](./x-components.slidingpanel.resetoncontentchange.md) |  | boolean | When true, whenever the DOM content in the sliding panel slot changes, it will reset the scroll position to 0. |
-|  [scrollFactor](./x-components.slidingpanel.scrollfactor.md) |  | number | Scroll factor that will dictate how much the scroll moves when pressing a navigation button. |
-|  [showButtons](./x-components.slidingpanel.showbuttons.md) |  | boolean | Would make the navigation buttons visible when they're needed or always hide them. |

package/docs/API-reference/components/common/modals/x-components.base-modal.md CHANGED Viewed

@@ -11,13 +11,15 @@ modals.
 ## Props
-| Name                           | Description                                                                                                                                                                                       | Type                 | Default                      |
-| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ---------------------------- |
-| <code>animation</code>         | Animation to use for opening/closing the modal. This animation only affects the content.                                                                                                          | <code>union</code>   | <code>() => NoElement</code> |
-| <code>overlayAnimation</code>  | Animation to use for the overlay (backdrop) part of the modal. By default, it uses<br />a fade transition.                                                                                        | <code>union</code>   | <code>() => Fade</code>      |
-| <code>open</code>              | Determines if the modal is open or not.                                                                                                                                                           | <code>boolean</code> | <code></code>                |
-| <code>focusOnOpen</code>       | Determines if the focused element changes to one inside the modal when it opens. Either the<br />first element with a positive tabindex or just the first focusable element.                      | <code>boolean</code> | <code>true</code>            |
-| <code>referenceSelector</code> | The reference selector of a DOM element to use as reference to position the modal.<br />This selector can be an ID or a class, if it is a class, it will use the first<br />element that matches. | <code>string</code>  | <code></code>                |
+| Name                           | Description                                                                                                                                                                                       | Type                              | Default                      |
+| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ---------------------------- |
+| <code>open</code>              | Determines if the modal is open or not.                                                                                                                                                           | <code>boolean</code>              | <code></code>                |
+| <code>focusOnOpen</code>       | Determines if the focused element changes to one inside the modal when it opens. Either the<br />first element with a positive tabindex or just the first focusable element.                      | <code>boolean</code>              | <code>true</code>            |
+| <code>referenceSelector</code> | The reference selector of a DOM element to use as reference to position the modal.<br />This selector can be an ID or a class, if it is a class, it will use the first<br />element that matches. | <code>string</code>               | <code></code>                |
+| <code>animation</code>         | Animation to use for opening/closing the modal.This animation only affects the content.                                                                                                           | <code>string \| typeof Vue</code> | <code>() => NoElement</code> |
+| <code>overlayAnimation</code>  | Animation to use for the overlay (backdrop) part of the modal. By default, it uses<br />a fade transition.                                                                                        | <code>string \| typeof Vue</code> | <code>() => Fade</code>      |
+| <code>contentClass</code>      | Class inherited by content element.                                                                                                                                                               | <code>string</code>               | <code></code>                |
+| <code>overlayClass</code>      | Class inherited by overlay element.                                                                                                                                                               | <code>string</code>               | <code></code>                |
 ## Events

package/docs/API-reference/components/common/x-components.base-variable-column-grid.md CHANGED Viewed

@@ -12,11 +12,11 @@ columns to the grid. It also allows to customize the grid items using the availa
 ## Props
-| Name                   | Description                                                                                                                             | Type                | Default           |
-| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----------------- |
-| <code>animation</code> | Animation component that will be used to animate the grid.                                                                              | <code>union</code>  | <code>'ul'</code> |
-| <code>items</code>     | The list of items to be rendered.                                                                                                       | <code>Array</code>  | <code></code>     |
-| <code>columns</code>   | The columns to render by default in the grid. This property is used when the user has not<br />selected any value in the column picker. | <code>number</code> | <code>0</code>    |
+| Name                   | Description                                                                                                                             | Type                       | Default           |
+| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ----------------- |
+| <code>animation</code> | Animation component that will be used to animate the grid.                                                                              | <code>AnimationProp</code> | <code>'ul'</code> |
+| <code>items</code>     | The list of items to be rendered.                                                                                                       | <code>ListItem[]</code>    | <code></code>     |
+| <code>columns</code>   | The columns to render by default in the grid. This property is used when the user has not<br />selected any value in the column picker. | <code>number</code>        | <code>0</code>    |
 ## Slots

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

@@ -19,6 +19,8 @@ Additionally, this component exposes the following props to modify the classes o
 | <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>     |
 ## Slots

package/js/components/animations/fade.vue.js CHANGED Viewed

@@ -30,7 +30,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-e7f99a48";
+  const __vue_scope_id__ = "data-v-37c760ff";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/animations/fade.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fade.vue.js","sources":["../../../../src/components/animations/fade.vue"],"sourcesContent":["<template>\n <!-- eslint-disable-next-line vue/attributes-order -->\n <transition v-bind=\"$attrs\" v-on=\"$listeners\" name=\"x-fade-\" :appear=\"appear\">\n <!-- @slot (Required) to add content to the transition -->\n <slot />\n </transition>\n</template>\n\n<script lang=\"ts\">\n import { defineComponent } from 'vue';\n\n /*\n Renders a transition wrapping the element passed in the default slot. The animation just fades\n * in/out the element by changing its opacity.\n \n @public\n /\n export default defineComponent({\n name: 'Fade',\n inheritAttrs: false,\n props: {\n /* Indicates if the transition must be applied on the initial render of the node. */\n appear: {\n type: Boolean,\n default: true\n }\n }\n });\n</script>\n\n<style lang=\"scss\" scoped>\n .x-fade {\n &--enter-active,\n &--leave-active {\n transition: opacity 0.25s ease-in-out;\n }\n\n &--leave-to,\n &--enter {\n opacity: 0;\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `Fade` component is intended to be used as animation to wrap an element with v-if or v-show and\nanimate it. The animation just fades in/out the element by changing its opacity.\n\nWrapping a component:\n\n```vue live\n<template>\n <div>\n <button @click=\"shouldRender = !shouldRender\">Toggle</button>\n <Fade>\n <p v-if=\"shouldRender\">León is southern Spain</p>\n </Fade>\n </div>\n</template>\n<script>\n import { Fade } from '@empathyco/x-components';\n export default {\n name: 'FadeAnimationDemo',\n components: {\n Fade\n },\n data() {\n return {\n shouldRender: false\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"fade.vue.js","sources":["../../../../src/components/animations/fade.vue"],"sourcesContent":["<template>\n <!-- eslint-disable-next-line vue/attributes-order -->\n <transition v-bind=\"$attrs\" v-on=\"$listeners\" name=\"x-fade-\" :appear=\"appear\">\n <!-- @slot (Required) to add content to the transition -->\n <slot />\n </transition>\n</template>\n\n<script lang=\"ts\">\n import { defineComponent } from 'vue';\n\n /*\n Renders a transition wrapping the element passed in the default slot. The animation just fades\n * in/out the element by changing its opacity.\n \n @public\n /\n export default defineComponent({\n name: 'Fade',\n inheritAttrs: false,\n props: {\n /* Indicates if the transition must be applied on the initial render of the node. */\n appear: {\n type: Boolean,\n default: true\n }\n }\n });\n</script>\n\n<style lang=\"scss\" scoped>\n .x-fade {\n &--enter-active,\n &--leave-active {\n transition: opacity 0.25s ease-in-out;\n }\n\n &--leave-to,\n &--enter {\n opacity: 0 !important;\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `Fade` component is intended to be used as animation to wrap an element with v-if or v-show and\nanimate it. The animation just fades in/out the element by changing its opacity.\n\nWrapping a component:\n\n```vue live\n<template>\n <div>\n <button @click=\"shouldRender = !shouldRender\">Toggle</button>\n <Fade>\n <p v-if=\"shouldRender\">León is southern Spain</p>\n </Fade>\n </div>\n</template>\n<script>\n import { Fade } from '@empathyco/x-components';\n export default {\n name: 'FadeAnimationDemo',\n components: {\n Fade\n },\n data() {\n return {\n shouldRender: false\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/animations/fade.vue3.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
-var css = ".x-fade--enter-active[data-v-e7f99a48], .x-fade--leave-active[data-v-e7f99a48] {\n  transition: opacity 0.25s ease-in-out;\n}\n.x-fade--leave-to[data-v-e7f99a48], .x-fade--enter[data-v-e7f99a48] {\n  opacity: 0;\n}";
+var css = ".x-fade--enter-active[data-v-37c760ff], .x-fade--leave-active[data-v-37c760ff] {\n  transition: opacity 0.25s ease-in-out;\n}\n.x-fade--leave-to[data-v-37c760ff], .x-fade--enter[data-v-37c760ff] {\n  opacity: 0 !important;\n}";
            const isBrowser = /*#__PURE__*/ (function () {
              return (
                 Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==

package/js/components/base-variable-column-grid.vue.js CHANGED Viewed

@@ -17,7 +17,7 @@ var __vue_render__ = function () {
     },
     scopedSlots: _vm._u(
       [
-        _vm._l(_vm.$scopedSlots, function (_, name) {
+        _vm._l(_vm.slots, function (_, name) {
           return {
             key: name,
             fn: function (ref) {

package/js/components/base-variable-column-grid.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"base-variable-column-grid.vue.js","sources":["../../../src/components/base-variable-column-grid.vue"],"sourcesContent":["<template>\n <BaseGrid :animation=\"animation\" :columns=\"columnsToRender\" :items=\"items\">\n <template v-for=\"(_, name) in ~~$scopedSlots~~\" v-slot:[name]=\"{ item }\">\n <!--\n @slot Customized item rendering. The slot name can either be default or the item's model\n name.\n @binding {GridItem} item - Item to render.\n -->\n <slot :name=\"name\" v-bind=\"{ item }\" />\n </template>\n </BaseGrid>\n</template>\n\n<script lang=\"ts\">\n import ~~Vue~~ ~~from~~ ~~'vue';\n import~~ ~~{ Component~~, ~~Prop~~ } from 'vue~~-property-decorator~~';\n import { ListItem } from '../utils/types';\n import ~~BaseGrid~~ from '~~./base~~-~~grid.vue~~';\n import { ~~XOn~~ } from '~~./decorators~~/bus.~~decorators~~';\n\n /*\n The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to\n * the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the\n * selected number of columns to the grid. It also allows to customize the grid items using the\n * available `scopedSlots`.\n \n @public\n /\n ~~@Component~~({\n components: {\n BaseGrid\n }\n ~~})\n export~~ ~~default class BaseVariableColumnGrid extends Vue~~ {\n /\n Animation component that will be used to animate the grid.\n \n @public\n /\n ~~@Prop(~~{ default: 'ul' })\n ~~protected animation!: Vue \| string;\~~n\n /\n The list of items to be rendered.\n \n @remarks The items must have an id property.\n \n @public\n /\n ~~@Prop()\n protected~~ items?: ListItem[];\n\n /\n The columns to render by default in the grid. This property is used when the user has not\n * selected any value in the column picker.\n \n @internal\n /\n ~~@Prop(~~{ default: 0 })\n ~~protected~~ ~~columns!:~~ ~~number~~;\n\n /\n The number of columns provided by a user interaction.\n \n @internal\n /\n ~~protected~~ providedColumns: number \| null = null;\n\n /\n The number of columns to render in the grid.\n \n @returns The number of columns.\n \n @internal\n /\n ~~protected~~ ~~get~~ ~~columnsToRender~~(): ~~number {\~~n ~~return this~~.~~providedColumns~~ === null ? ~~this~~.columns : ~~this~~.~~providedColumns~~;\n }\n\n /\n Handler to update the number of columns when the user selects a new value.\n \n @param newColumns - The new columns value.\n \n @internal\n */\n ~~@XOn~~(['ColumnsNumberProvided'])\n ~~setColumns~~(newColumns: ~~number):~~ ~~void {\n this~~.~~providedColumns~~ = newColumns;\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to the\n`ColumnsNumberProvided` events and passes the selected amount of columns to the grid. It also allows\nyou to customize the grid items using the available `scopedSlots`.\n\n```vue\n<template>\n <section class=\"results\">\n <button @click=\"setColumns(4)\" class=\"column-picker-selector\">\n <span class=\"column-picker-selector__text\">4 columns</span>\n </button>\n <BaseVariableColumnGrid :animation=\"animation\" :items=\"items\">\n <template #default=\"{ item }\">\n <span data-test=\"default-slot\">{{ item.id }}</span>\n </template>\n <template #result=\"{ item }\">\n <span data-test=\"result-slot\">{{ 'Result ' + item.id }}</span>\n </template>\n </BaseVariableColumnGrid>\n </section>\n</template>\n\n<script>\n import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n export default {\n name: 'ResultsSection',\n components: {\n BaseVariableColumnGrid\n },\n data() {\n return {\n animation: StaggeredFadeAndSlide,\n items: [\n {\n id: 'res-1',\n modelName: 'Result',\n name: 'Product 1'\n },\n {\n id: 'res-2',\n modelName: 'Result',\n name: 'Product 2'\n }\n ]\n };\n },\n methods: {\n setColumns(columns) {\n this.$x.emit('UserClickedColumnPicker', columns);\n }\n }\n };\n</script>\n```\n\n### Playing with props\n\nConfiguring the default columns to be rendered. These columns will be the default value until the\n`ColumnsNumberProvided` is emitted and changes the value.\n\n```vue\n<template>\n <section class=\"results\">\n <button @click=\"setColumns(5)\" class=\"column-picker-selector\">\n <span class=\"column-picker-selector__text\">5 columns</span>\n </button>\n <BaseVariableColumnGrid :animation=\"animation\" :items=\"items\" :columns=\"3\">\n <template #default=\"{ item }\">\n <span data-test=\"default-slot\">{{ item.id }}</span>\n </template>\n <template #result=\"{ item }\">\n <span data-test=\"result-slot\">{{ 'Result ' + item.id }}</span>\n </template>\n </BaseVariableColumnGrid>\n </section>\n</template>\n\n<script>\n import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n export default {\n name: 'ResultsSection',\n components: {\n BaseVariableColumnGrid\n },\n data() {\n return {\n animation: StaggeredFadeAndSlide,\n items: [\n {\n id: 'res-1',\n modelName: 'Result',\n name: 'Product 1'\n },\n {\n id: 'res-2',\n modelName: 'Result',\n name: 'Product 2'\n }\n ]\n };\n },\n methods: {\n setColumns(columns) {\n this.$x.emit('UserClickedColumnPicker', columns);\n }\n }\n };\n</script>\n```\n\n### Customizing the items width\n\nThe `--x-size-min-width-grid-item` variable can be used to customize the min width of the grid\nitems.\n\n```vue\n<template>\n <BaseVariableColumnGrid\n :animation=\"animation\"\n :items=\"items\"\n style=\"--x-size-min-width-grid-item: 150px\"\n >\n <template #default=\"{ item }\">\n {{ `Default slot content: ${item.id}` }}\n </template>\n </BaseVariableColumnGrid>\n</template>\n\n<script>\n import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n export default {\n name: 'ResultsSection',\n components: {\n BaseVariableColumnGrid\n },\n data() {\n return {\n animation: StaggeredFadeAndSlide,\n items: [\n {\n id: 'res-1',\n modelName: 'Result',\n name: 'Product 1'\n },\n {\n id: 'res-2',\n modelName: 'Result',\n name: 'Product 2'\n }\n ]\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"base-variable-column-grid.vue.js","sources":["../../../src/components/base-variable-column-grid.vue"],"sourcesContent":["<template>\n <BaseGrid :animation=\"animation\" :columns=\"columnsToRender\" :items=\"items\">\n <template v-for=\"(_, name) in slots\" v-slot:[name]=\"{ item }\">\n <!--\n @slot Customized item rendering. The slot name can either be default or the item's model\n name.\n @binding {GridItem} item - Item to render.\n -->\n <slot :name=\"name\" v-bind=\"{ item }\" />\n </template>\n </BaseGrid>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType, ref } from 'vue';\n import { ListItem } from '../utils/types';\n import { AnimationProp } from '../types/animation-prop';\n import { useXBus } from '../composables/use-x-bus';\n import BaseGrid from './base-grid.vue';\n\n /*\n The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to\n * the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the\n * selected number of columns to the grid. It also allows to customize the grid items using the\n * available `scopedSlots`.\n \n @public\n /\n export default defineComponent({\n name: 'BaseVariableColumnGrid',\n components: {\n BaseGrid\n },\n props: {\n /\n Animation component that will be used to animate the grid.\n \n @public\n /\n animation: {\n type: AnimationProp,\n default: 'ul'\n },\n /\n The list of items to be rendered.\n \n @remarks The items must have an id property.\n \n @public\n /\n items: Array as PropType<ListItem[]>,\n /\n The columns to render by default in the grid. This property is used when the user has not\n * selected any value in the column picker.\n \n @internal\n /\n columns: {\n type: Number,\n default: 0\n }\n },\n setup(props, { slots }) {\n const bus = useXBus();\n /\n The number of columns provided by a user interaction.\n \n @internal\n /\n const providedColumns = ref<number \| null>(null);\n\n /\n The number of columns to render in the grid.\n \n @returns The number of columns.\n \n @internal\n /\n const columnsToRender = computed(() =>\n providedColumns.value === null ? props.columns : providedColumns.value\n );\n\n /\n Handler to update the number of columns when the user selects a new value.\n \n @param newColumns - The new columns value.\n \n @internal\n */\n bus\n .on('ColumnsNumberProvided', false)\n .subscribe(newColumns => (providedColumns.value = newColumns));\n\n return {\n columnsToRender,\n slots\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to the\n`ColumnsNumberProvided` events and passes the selected amount of columns to the grid. It also allows\nyou to customize the grid items using the available `scopedSlots`.\n\n```vue\n<template>\n <section class=\"results\">\n <button @click=\"setColumns(4)\" class=\"column-picker-selector\">\n <span class=\"column-picker-selector__text\">4 columns</span>\n </button>\n <BaseVariableColumnGrid :animation=\"animation\" :items=\"items\">\n <template #default=\"{ item }\">\n <span data-test=\"default-slot\">{{ item.id }}</span>\n </template>\n <template #result=\"{ item }\">\n <span data-test=\"result-slot\">{{ 'Result ' + item.id }}</span>\n </template>\n </BaseVariableColumnGrid>\n </section>\n</template>\n\n<script>\n import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n export default {\n name: 'ResultsSection',\n components: {\n BaseVariableColumnGrid\n },\n data() {\n return {\n animation: StaggeredFadeAndSlide,\n items: [\n {\n id: 'res-1',\n modelName: 'Result',\n name: 'Product 1'\n },\n {\n id: 'res-2',\n modelName: 'Result',\n name: 'Product 2'\n }\n ]\n };\n },\n methods: {\n setColumns(columns) {\n this.$x.emit('UserClickedColumnPicker', columns);\n }\n }\n };\n</script>\n```\n\n### Playing with props\n\nConfiguring the default columns to be rendered. These columns will be the default value until the\n`ColumnsNumberProvided` is emitted and changes the value.\n\n```vue\n<template>\n <section class=\"results\">\n <button @click=\"setColumns(5)\" class=\"column-picker-selector\">\n <span class=\"column-picker-selector__text\">5 columns</span>\n </button>\n <BaseVariableColumnGrid :animation=\"animation\" :items=\"items\" :columns=\"3\">\n <template #default=\"{ item }\">\n <span data-test=\"default-slot\">{{ item.id }}</span>\n </template>\n <template #result=\"{ item }\">\n <span data-test=\"result-slot\">{{ 'Result ' + item.id }}</span>\n </template>\n </BaseVariableColumnGrid>\n </section>\n</template>\n\n<script>\n import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n export default {\n name: 'ResultsSection',\n components: {\n BaseVariableColumnGrid\n },\n data() {\n return {\n animation: StaggeredFadeAndSlide,\n items: [\n {\n id: 'res-1',\n modelName: 'Result',\n name: 'Product 1'\n },\n {\n id: 'res-2',\n modelName: 'Result',\n name: 'Product 2'\n }\n ]\n };\n },\n methods: {\n setColumns(columns) {\n this.$x.emit('UserClickedColumnPicker', columns);\n }\n }\n };\n</script>\n```\n\n### Customizing the items width\n\nThe `--x-size-min-width-grid-item` variable can be used to customize the min width of the grid\nitems.\n\n```vue\n<template>\n <BaseVariableColumnGrid\n :animation=\"animation\"\n :items=\"items\"\n style=\"--x-size-min-width-grid-item: 150px\"\n >\n <template #default=\"{ item }\">\n {{ `Default slot content: ${item.id}` }}\n </template>\n </BaseVariableColumnGrid>\n</template>\n\n<script>\n import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n export default {\n name: 'ResultsSection',\n components: {\n BaseVariableColumnGrid\n },\n data() {\n return {\n animation: StaggeredFadeAndSlide,\n items: [\n {\n id: 'res-1',\n modelName: 'Result',\n name: 'Product 1'\n },\n {\n id: 'res-2',\n modelName: 'Result',\n name: 'Product 2'\n }\n ]\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/base-variable-column-grid.vue2.js CHANGED Viewed

@@ -1,8 +1,7 @@
-import { __decorate } from 'tslib';
-import Vue from 'vue';
-import { Prop, Component } from 'vue-property-decorator';
+import { defineComponent, ref, computed } from 'vue';
+import { AnimationProp } from '../types/animation-prop.js';
+import { useXBus } from '../composables/use-x-bus.js';
 import __vue_component__ from './base-grid.vue.js';
-import { XOn } from './decorators/bus.decorators.js';
 /**
  * The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to
@@ -12,57 +11,72 @@ import { XOn } from './decorators/bus.decorators.js';
  *
  * @public
  */
-let BaseVariableColumnGrid = class BaseVariableColumnGrid extends Vue {
-    constructor() {
-        super(...arguments);
+var script = defineComponent({
+    name: 'BaseVariableColumnGrid',
+    components: {
+        BaseGrid: __vue_component__
+    },
+    props: {
+        /**
+         * Animation component that will be used to animate the grid.
+         *
+         * @public
+         */
+        animation: {
+            type: AnimationProp,
+            default: 'ul'
+        },
+        /**
+         * The list of items to be rendered.
+         *
+         * @remarks The items must have an id property.
+         *
+         * @public
+         */
+        items: Array,
+        /**
+         * The columns to render by default in the grid. This property is used when the user has not
+         * selected any value in the column picker.
+         *
+         * @internal
+         */
+        columns: {
+            type: Number,
+            default: 0
+        }
+    },
+    setup(props, { slots }) {
+        const bus = useXBus();
         /**
          * The number of columns provided by a user interaction.
          *
          * @internal
          */
-        this.providedColumns = null;
-    }
-    /**
-     * The number of columns to render in the grid.
-     *
-     * @returns The number of columns.
-     *
-     * @internal
-     */
-    get columnsToRender() {
-        return this.providedColumns === null ? this.columns : this.providedColumns;
-    }
-    /**
-     * Handler to update the number of columns when the user selects a new value.
-     *
-     * @param newColumns - The new columns value.
-     *
-     * @internal
-     */
-    setColumns(newColumns) {
-        this.providedColumns = newColumns;
+        const providedColumns = ref(null);
+        /**
+         * The number of columns to render in the grid.
+         *
+         * @returns The number of columns.
+         *
+         * @internal
+         */
+        const columnsToRender = computed(() => providedColumns.value === null ? props.columns : providedColumns.value);
+        /**
+         * Handler to update the number of columns when the user selects a new value.
+         *
+         * @param newColumns - The new columns value.
+         *
+         * @internal
+         */
+        bus
+            .on('ColumnsNumberProvided', false)
+            .subscribe(newColumns => (providedColumns.value = newColumns));
+        return {
+            columnsToRender,
+            slots
+        };
     }
-};
-__decorate([
-    Prop({ default: 'ul' })
-], BaseVariableColumnGrid.prototype, "animation", void 0);
-__decorate([
-    Prop()
-], BaseVariableColumnGrid.prototype, "items", void 0);
-__decorate([
-    Prop({ default: 0 })
-], BaseVariableColumnGrid.prototype, "columns", void 0);
-__decorate([
-    XOn(['ColumnsNumberProvided'])
-], BaseVariableColumnGrid.prototype, "setColumns", null);
-BaseVariableColumnGrid = __decorate([
-    Component({
-        components: {
-            BaseGrid: __vue_component__
-        }
-    })
-], BaseVariableColumnGrid);
-var script = BaseVariableColumnGrid;
+});
 export { script as default };
 //# sourceMappingURL=base-variable-column-grid.vue2.js.map

package/js/components/base-variable-column-grid.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"base-variable-column-grid.vue2.js","sources":["../../../src/components/base-variable-column-grid.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n import ~~Vue~~ ~~from~~ ~~'vue';\n import~~ ~~{ Component~~, ~~Prop~~ } from 'vue~~-property-decorator~~';\n import { ListItem } from '../utils/types';\n import ~~BaseGrid~~ from '~~./base~~-~~grid.vue~~';\n import { ~~XOn~~ } from '~~./decorators~~/bus.~~decorators~~';\n\n /*\n The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to\n * the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the\n * selected number of columns to the grid. It also allows to customize the grid items using the\n * available `scopedSlots`.\n \n @public\n /\n ~~@Component~~({\n components: {\n BaseGrid\n }\n ~~})\n export~~ ~~default class BaseVariableColumnGrid extends Vue~~ {\n /\n Animation component that will be used to animate the grid.\n \n @public\n /\n ~~@Prop(~~{ default: 'ul' })\n ~~protected animation!: Vue \| string;\~~n\n /\n The list of items to be rendered.\n \n @remarks The items must have an id property.\n \n @public\n /\n ~~@Prop()\n protected~~ items?: ListItem[];\n\n /\n The columns to render by default in the grid. This property is used when the user has not\n * selected any value in the column picker.\n \n @internal\n /\n ~~@Prop(~~{ default: 0 })\n ~~protected~~ ~~columns!:~~ ~~number~~;\n\n /\n The number of columns provided by a user interaction.\n \n @internal\n /\n ~~protected~~ providedColumns: number \| null = null;\n\n /\n The number of columns to render in the grid.\n \n @returns The number of columns.\n \n @internal\n /\n ~~protected~~ ~~get~~ ~~columnsToRender~~(): ~~number {\~~n ~~return this~~.~~providedColumns~~ === null ? ~~this~~.columns : ~~this~~.~~providedColumns~~;\n }\n\n /\n Handler to update the number of columns when the user selects a new value.\n \n @param newColumns - The new columns value.\n \n @internal\n */\n ~~@XOn~~(['ColumnsNumberProvided'])\n ~~setColumns~~(newColumns: ~~number):~~ ~~void {\n this~~.~~providedColumns~~ = newColumns;\n }\n }\n"],"names":["BaseGrid"],"mappings":"~~;;;;;;~~AAoBE;;;;;;;AAOG;~~AAMY~~,~~IAAM~~,~~sBAAsB~~,~~GAA5B~~,~~MAAM~~,~~sBAAuB~~,~~SAAQ~~,~~GAAG,CAAA~~;~~AAAxC~~,IAAA,~~WAAA~~,~~GAAA;;AA4Bb;;;;AAIG~~;~~QACO~~,~~IAAe~~,~~CAAA~~,~~eAAA~~,~~GAAkB~~,~~IAAI,CAAC~~;~~KAwBjD~~;~~AAtBC;;;;;;AAMG;~~AACH,~~IAAA~~,~~IAAc~~,~~eAAe,GAAA~~;~~AAC3B~~,~~QAAA~~,~~OAAO,~~IAAI,~~CAAC~~,~~eAAe~~,~~KAAK~~,~~IAAI,GAAG,IAAI,CAAC,~~OAAO,~~GAAG~~,IAAI,~~CAAC,eAAe,CAAC~~;~~KAC5E;AAED~~;;;;;;AAMG;~~AAEH~~,~~IAAA,UAAU,CAAC,UAAkB,EAAA;AAC3B,~~QAAA,~~IAAI~~,~~CAAC~~,~~eAAe,GAAG,UAAU,CAAC~~;~~KACnC~~;~~CACF~~,~~CAAA;AAlDC~~,~~UAAA~~,~~CAAA~~;~~AADC~~,~~IAAA~~,IAAI,~~CAAC,~~EAAE,~~OAAO~~,~~EAAE~~,~~IAAI~~,EAAE,CAAC;~~AACW~~,~~CAAA,EAAA,sBAAA,CAAA,~~SAAA,~~EAAA,WAAA,EAAA,~~KAAA,~~CAAA~~,~~CAAA~~,~~CAAA;AAUnC~~,~~UAAA~~,~~CAAA;AADC~~,~~IAAA~~,~~IAAI~~,EAAE~~;AACsB~~,~~CAAA,~~EAAA,~~sBAAA~~,~~CAAA~~,~~SAAA~~,~~EAAA~~,~~OAAA~~,~~EAAA~~,~~KAAA~~,~~CAAA~~,~~CAAA~~,~~CAAA;AAS7B~~,~~UAAA~~,~~CAAA;AADC~~,~~IAAA~~,IAAI,CAAC,~~EAAE,OAAO,EAAE,~~CAAC~~,EAAE,CAAC~~;~~AACM~~,~~CAAA~~,~~EAAA~~,~~sBAAA~~,~~CAAA~~,~~SAAA~~,~~EAAA~~,~~SAAA~~,~~EAAA~~,~~KAAA~~,~~CAAA~~,~~CAAA~~,~~CAAA;AA4B3B~~,~~UAAA~~,~~CAAA;AADC~~,~~IAAA~~,GAAG,~~CAAC~~,CAAC,~~uBAAuB~~,~~CAAC~~,CAAC;~~AAG9B~~,~~CAAA~~,~~EAAA~~,~~sBAAA~~,~~CAAA~~,~~SAAA~~,~~EAAA~~,~~YAAA~~,~~EAAA~~,~~IAAA~~,~~CAAA~~,~~CAAA;AAxDkB~~,~~sBAAsB~~,~~GAAA~~,~~UAAA~~,~~CAAA;AAL1C~~,~~IAAA~~,~~SAAS~~,CAAC~~;AACT~~,~~QAAA~~,~~UAAU~~,~~EAAE~~;~~sBACVA~~,~~iBAAQ~~;~~AACT~~,~~SAAA~~;~~KACF~~,CAAC;~~AACmB~~,CAAA,~~EAAA,sBAAsB,CAyD1C,CAAA;aAzDoB,sBAAsB~~;;;;"}
1	+ {"version":3,"file":"base-variable-column-grid.vue2.js","sources":["../../../src/components/base-variable-column-grid.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n import { computed, defineComponent, PropType, ref } from 'vue';\n import { ListItem } from '../utils/types';\n import { AnimationProp } from '../types/animation-prop';\n import { useXBus } from '../composables/use-x-bus';\n import BaseGrid from './base-grid.vue';\n\n /*\n The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to\n * the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the\n * selected number of columns to the grid. It also allows to customize the grid items using the\n * available `scopedSlots`.\n \n @public\n /\n export default defineComponent({\n name: 'BaseVariableColumnGrid',\n components: {\n BaseGrid\n },\n props: {\n /\n Animation component that will be used to animate the grid.\n \n @public\n /\n animation: {\n type: AnimationProp,\n default: 'ul'\n },\n /\n The list of items to be rendered.\n \n @remarks The items must have an id property.\n \n @public\n /\n items: Array as PropType<ListItem[]>,\n /\n The columns to render by default in the grid. This property is used when the user has not\n * selected any value in the column picker.\n \n @internal\n /\n columns: {\n type: Number,\n default: 0\n }\n },\n setup(props, { slots }) {\n const bus = useXBus();\n /\n The number of columns provided by a user interaction.\n \n @internal\n /\n const providedColumns = ref<number \| null>(null);\n\n /\n The number of columns to render in the grid.\n \n @returns The number of columns.\n \n @internal\n /\n const columnsToRender = computed(() =>\n providedColumns.value === null ? props.columns : providedColumns.value\n );\n\n /\n Handler to update the number of columns when the user selects a new value.\n \n @param newColumns - The new columns value.\n \n @internal\n */\n bus\n .on('ColumnsNumberProvided', false)\n .subscribe(newColumns => (providedColumns.value = newColumns));\n\n return {\n columnsToRender,\n slots\n };\n }\n });\n"],"names":["BaseGrid"],"mappings":";;;;;AAoBE;;;;;;;AAOG;AACH,aAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,wBAAwB;AAC9B,IAAA,UAAU,EAAE;kBACVA,iBAAQ;AACT,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIG;AACH,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;;;AAMG;AACH,QAAA,KAAK,EAAE,KAA6B;AACpC;;;;;AAKG;AACH,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAA;AACpB,QAAA,MAAM,GAAG,GAAG,OAAO,EAAE,CAAC;AACtB;;;;AAIG;AACH,QAAA,MAAM,eAAe,GAAG,GAAG,CAAgB,IAAI,CAAC,CAAC;AAEjD;;;;;;AAMG;QACH,MAAM,eAAe,GAAG,QAAQ,CAAC,MAC/B,eAAe,CAAC,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC,OAAO,GAAG,eAAe,CAAC,KAAK,CACvE,CAAC;AAEF;;;;;;AAMG;QACH,GAAG;AACA,aAAA,EAAE,CAAC,uBAAuB,EAAE,KAAK,CAAC;AAClC,aAAA,SAAS,CAAC,UAAU,KAAK,eAAe,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC;QAEjE,OAAO;YACL,eAAe;YACf,KAAK;SACN,CAAC;KACH;AACF,CAAA,CAAC;;;;"}

package/js/components/dynamic-props.mixin.js CHANGED Viewed

@@ -17,7 +17,7 @@ import Vue from 'vue';
  *   }
  * ```
  * @returns Mixin for the component.
- *
+ * @deprecated Use props.
  */
 function dynamicPropsMixin(propNames) {
     return Vue.extend({

package/js/components/dynamic-props.mixin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dynamic-props.mixin.js","sources":["../../../src/components/dynamic-props.mixin.ts"],"sourcesContent":["import Vue from 'vue';\nimport { PropValidator } from 'vue/types/options';\nimport { ExtendedVue } from 'vue/types/vue';\n\n/*\n Mixin that creates a string prop in the component for each element\n * within the array passed as `propNames` argument.\n \n @param propNames - Array with the names of the props to create.\n * @example\n * ```typescript\n \n @Component({\n * components: { RelatedTag },\n * mixins: [xComponentMixin(relatedTagsXModule)]\n * })\n * export default class RelatedTags extends Mixins(dynamicPropsMixin(['list', 'li', 'tag'])) {\n * // This component will have available 3 props: 'list', 'li' and 'tag'\n * }\n * ```\n * @returns Mixin for the component.\n \n /\nexport function dynamicPropsMixin<PropNames extends string>(\n propNames: PropNames[]\n): ExtendedVue<Vue, unknown, unknown, unknown, Partial<Record<PropNames, string>>> {\n return Vue.extend({\n props: propNames.reduce(\n (props, propName) => ({ ...props, [propName]: { type: String } }),\n {} as Record<PropNames, PropValidator<string>>\n )\n });\n}\n"],"names":[],"mappings":";;AAIA;;;;;;;;;;;;;;;;;;AAkBG;AACG,SAAU,iBAAiB,CAC/B,SAAsB,EAAA;IAEtB,OAAO,GAAG,CAAC,MAAM,CAAC;AAChB,QAAA,KAAK,EAAE,SAAS,CAAC,MAAM,CACrB,CAAC,KAAK,EAAE,QAAQ,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC,QAAQ,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EACjE,EAA8C,CAC/C;AACF,KAAA,CAAC,CAAC;AACL;;;;"}
1	+ {"version":3,"file":"dynamic-props.mixin.js","sources":["../../../src/components/dynamic-props.mixin.ts"],"sourcesContent":["import Vue from 'vue';\nimport { PropValidator } from 'vue/types/options';\nimport { ExtendedVue } from 'vue/types/vue';\n\n/*\n Mixin that creates a string prop in the component for each element\n * within the array passed as `propNames` argument.\n \n @param propNames - Array with the names of the props to create.\n * @example\n * ```typescript\n \n @Component({\n * components: { RelatedTag },\n * mixins: [xComponentMixin(relatedTagsXModule)]\n * })\n * export default class RelatedTags extends Mixins(dynamicPropsMixin(['list', 'li', 'tag'])) {\n * // This component will have available 3 props: 'list', 'li' and 'tag'\n * }\n * ```\n * @returns Mixin for the component.\n * @deprecated Use props.\n */\nexport function dynamicPropsMixin<PropNames extends string>(\n propNames: PropNames[]\n): ExtendedVue<Vue, unknown, unknown, unknown, Partial<Record<PropNames, string>>> {\n return Vue.extend({\n props: propNames.reduce(\n (props, propName) => ({ ...props, [propName]: { type: String } }),\n {} as Record<PropNames, PropValidator<string>>\n )\n });\n}\n"],"names":[],"mappings":";;AAIA;;;;;;;;;;;;;;;;;;AAkBG;AACG,SAAU,iBAAiB,CAC/B,SAAsB,EAAA;IAEtB,OAAO,GAAG,CAAC,MAAM,CAAC;AAChB,QAAA,KAAK,EAAE,SAAS,CAAC,MAAM,CACrB,CAAC,KAAK,EAAE,QAAQ,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC,QAAQ,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EACjE,EAA8C,CAC/C;AACF,KAAA,CAAC,CAAC;AACL;;;;"}