npm - @empathyco/x-components - Versions diffs - 6.0.0-alpha.139 → 6.0.0-alpha.140 - Mend

@empathyco/x-components 6.0.0-alpha.139 → 6.0.0-alpha.140

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 (58) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## 6.0.0-alpha.140 (2025-09-11)
+* refactor(sliding-panel): simplify scrolling logic and enhance reactivity (#1870) ([c659e00](https://github.com/empathyco/x/commit/c659e00)), closes [#1870](https://github.com/empathyco/x/issues/1870)
+* chore: pr review ([6a1d503](https://github.com/empathyco/x/commit/6a1d503))
+* feat(AiOverview): add display tagging ([73aa630](https://github.com/empathyco/x/commit/73aa630))
+* feat(AiOverview): add toolingDisplayClick tagging ([42f1fd4](https://github.com/empathyco/x/commit/42f1fd4))
 ## 6.0.0-alpha.139 (2025-09-09)
 * chore: pr review ([d30c56f](https://github.com/empathyco/x/commit/d30c56f))

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

@@ -26,5 +26,5 @@ export interface AiMutations extends ConfigMutations<AiState>, QueryMutations
 |  [setSuggestionsSearch](./x-components.aimutations.setsuggestionssearch.md) |  | (suggestionsSearch: AiSuggestionSearch\[\]) =&gt; void | Sets the suggestions search from the suggestions search response. |
 |  [setSuggestionsSearchLoading](./x-components.aimutations.setsuggestionssearchloading.md) |  | (value: boolean) =&gt; void | Sets the loading fot the suggestions search response. |
 |  [setSuggestionText](./x-components.aimutations.setsuggestiontext.md) |  | (suggestionText: string) =&gt; void | Sets the suggestionText from the streamed response. |
-|  [setTaggings](./x-components.aimutations.settaggings.md) |  | (taggings: AiQuestion\['tagging'\]\[\]) =&gt; void | Sets the taggings from the streamed response. |
+|  [setTagging](./x-components.aimutations.settagging.md) |  | (tagging: AiSuggestionTagging) =&gt; void | Sets the tagging from the streamed response. |

package/docs/API-reference/api/{x-components.aimutations.settaggings.md → x-components.aimutations.settagging.md} RENAMED Viewed

@@ -1,13 +1,13 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [AiMutations](./x-components.aimutations.md) &gt; [setTaggings](./x-components.aimutations.settaggings.md)
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [AiMutations](./x-components.aimutations.md) &gt; [setTagging](./x-components.aimutations.settagging.md)
-## AiMutations.setTaggings property
+## AiMutations.setTagging property
-Sets the taggings from the streamed response.
+Sets the tagging from the streamed response.
 **Signature:**
 ```typescript
-setTaggings: (taggings: AiQuestion['tagging'][]) => void;
+setTagging: (tagging: AiSuggestionTagging) => void;
 ```

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

@@ -36,7 +36,9 @@ _default: import("vue").DefineComponent<{
     }>>;
     suggestionsSearch: import("vue").ComputedRef<AiSuggestionSearch[]>;
     suggestionText: import("vue").ComputedRef<string>;
-    toggleVisibility: () => void;
+    setExpanded: (newValue: boolean) => void;
+    query: import("vue").ComputedRef<string>;
+    tagging: import("vue").ComputedRef<import("@empathyco/x-types").AiSuggestionTagging | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     title: {
         type: PropType<string>;

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

@@ -26,5 +26,5 @@ export interface AiState extends QueryState
 |  [suggestionsSearch](./x-components.aistate.suggestionssearch.md) |  | AiSuggestionSearch\[\] | The results per query retrieved by the suggestion search endpoint |
 |  [suggestionsSearchLoading](./x-components.aistate.suggestionssearchloading.md) |  | boolean | Loading state for the suggestions search response |
 |  [suggestionText](./x-components.aistate.suggestiontext.md) |  | string |  |
-|  [taggings](./x-components.aistate.taggings.md) |  | AiQuestion\['tagging'\]\[\] |  |
+|  [tagging](./x-components.aistate.tagging.md) |  | AiSuggestionTagging \| undefined |  |

package/docs/API-reference/api/{x-components.aistate.taggings.md → x-components.aistate.tagging.md} RENAMED Viewed

@@ -1,11 +1,11 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [AiState](./x-components.aistate.md) &gt; [taggings](./x-components.aistate.taggings.md)
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [AiState](./x-components.aistate.md) &gt; [tagging](./x-components.aistate.tagging.md)
-## AiState.taggings property
+## AiState.tagging property
 **Signature:**
 ```typescript
-taggings: AiQuestion['tagging'][];
+tagging: AiSuggestionTagging | undefined;
 ```

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

@@ -18,4 +18,5 @@ export interface AiXEvents
 |  --- | --- | --- | --- |
 |  [AiSuggestionsRequestUpdated](./x-components.aixevents.aisuggestionsrequestupdated.md) |  | AiSuggestionsRequest \| null |  |
 |  [AiSuggestionsSearchRequestUpdated](./x-components.aixevents.aisuggestionssearchrequestupdated.md) |  | AiSuggestionsSearchRequest \| null |  |
+|  [UserClickedAiOverviewExpandButton](./x-components.aixevents.userclickedaioverviewexpandbutton.md) |  | boolean |  |

package/docs/API-reference/api/x-components.aixevents.userclickedaioverviewexpandbutton.md ADDED Viewed

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [AiXEvents](./x-components.aixevents.md) &gt; [UserClickedAiOverviewExpandButton](./x-components.aixevents.userclickedaioverviewexpandbutton.md)
+## AiXEvents.UserClickedAiOverviewExpandButton property
+**Signature:**
+```typescript
+UserClickedAiOverviewExpandButton: boolean;
+```

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

@@ -9,7 +9,7 @@ Indicates where the feature is placed.
 **Signature:**
 ```typescript
-export type FeatureLocation = 'external' | 'my_history' | 'no_query' | 'results' | 'no_results' | 'low_results' | 'none' | 'predictive_layer' | 'pdp' | 'url_history' | 'url_history_pdp' | 'related_prompts' | 'add2cart';
+export type FeatureLocation = 'external' | 'my_history' | 'no_query' | 'results' | 'no_results' | 'low_results' | 'none' | 'predictive_layer' | 'pdp' | 'url_history' | 'url_history_pdp' | 'related_prompts' | 'add2cart' | 'overview';
 ```
 ## Example 1

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

@@ -194,6 +194,7 @@ _default: import("vue").DefineComponent<{
         ReloadRelatedPromptsRequested?: void | undefined;
         AiSuggestionsRequestUpdated?: import("@empathyco/x-types").AiSuggestionsRequest | null | undefined;
         AiSuggestionsSearchRequestUpdated?: import("@empathyco/x-types").AiSuggestionsSearchRequest | null | undefined;
+        UserClickedAiOverviewExpandButton?: boolean | undefined;
     }>;
     innerCssClasses: import("vue").ComputedRef<(string | Dictionary<boolean>)[]>;
     renderedChildrenFilters: import("vue").ComputedRef<HierarchicalFilterModel[]>;

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

@@ -666,6 +666,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [toggleRelatedTagWire](./x-components.togglerelatedtagwire.md) | Sets the selected related tags. |
 |  [track](./x-components.track.md) | Default implementation for the [TaggingActions.track](./x-components.taggingactions.track.md)<!-- -->. |
 |  [trackAddToCartWire](./x-components.trackaddtocartwire.md) | Performs a track of a result added to the cart. |
+|  [trackAiOverviewButtonClickedWire](./x-components.trackaioverviewbuttonclickedwire.md) | Performs a track of clicking the AI overview expand button when the playload (expanded) is false. |
 |  [trackBannerClickedWire](./x-components.trackbannerclickedwire.md) | Tracks the tagging of the banner. |
 |  [trackDisplayClickedWire](./x-components.trackdisplayclickedwire.md) | Performs a track of a display result being clicked. |
 |  [trackElementDisplayedWire](./x-components.trackelementdisplayedwire.md) | Performs a track of a display element appearing. |

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

@@ -9,5 +9,5 @@ The name of the tool that generated the query.
 **Signature:**
 ```typescript
-export type QueryFeature = 'search_box' | 'url' | 'query_suggestion' | 'next_query' | 'popular_search' | 'history_query' | 'partial_result' | 'related_tag' | 'spellcheck' | 'customer' | 'semantics' | 'related_prompts';
+export type QueryFeature = 'search_box' | 'url' | 'query_suggestion' | 'next_query' | 'popular_search' | 'history_query' | 'partial_result' | 'related_tag' | 'spellcheck' | 'customer' | 'semantics' | 'related_prompts' | 'overview';
 ```

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

@@ -9,5 +9,5 @@ The name of the tool that generated the results.
 **Signature:**
 ```typescript
-export type ResultFeature = 'search' | 'topclicked_recommendations' | 'brand_recommendations' | 'next_query_recommendations' | 'semantic_recommendations' | 'partial_results' | 'identifier_result' | 'related_prompts';
+export type ResultFeature = 'search' | 'topclicked_recommendations' | 'brand_recommendations' | 'next_query_recommendations' | 'semantic_recommendations' | 'partial_results' | 'identifier_result' | 'related_prompts' | 'overview';
 ```

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

@@ -191,6 +191,7 @@ _default: import("vue").DefineComponent<{
         ReloadRelatedPromptsRequested?: void | undefined;
         AiSuggestionsRequestUpdated?: import("@empathyco/x-types").AiSuggestionsRequest | null | undefined;
         AiSuggestionsSearchRequestUpdated?: import("@empathyco/x-types").AiSuggestionsSearchRequest | null | undefined;
+        UserClickedAiOverviewExpandButton?: boolean | undefined;
     }>;
     innerCssClasses: import("vue").ComputedRef<(string | Dictionary<boolean>)[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

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

@@ -31,14 +31,19 @@ _default: import("vue").DefineComponent<{
         type: PropType<VueCSSClasses>;
     };
 }, {
+    arrivedState: {
+        left: boolean;
+        right: boolean;
+        top: boolean;
+        bottom: boolean;
+    };
     cssClasses: import("vue").ComputedRef<{
         'x-sliding-panel-at-start': boolean;
         'x-sliding-panel-at-end': boolean;
     }>;
-    debouncedUpdateScroll: import("../utils/types").DebouncedFunction<[]>;
     scrollContainerRef: import("vue").Ref<HTMLDivElement | undefined>;
-    scrollLeft: () => void;
-    scrollRight: () => void;
+    slotContainerWidth: import("vue").Ref<number>;
+    xScroll: import("vue").WritableComputedRef<number>;
     slots: Readonly<{
         [name: string]: import("vue").Slot<any> | undefined;
     }>;

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

@@ -181,6 +181,7 @@ _default: import("vue").DefineComponent<{}, {
         ReloadRelatedPromptsRequested: (payload: undefined, metadata: WireMetadata) => unknown;
         AiSuggestionsRequestUpdated: (payload: import("@empathyco/x-types").AiSuggestionsRequest | null, metadata: WireMetadata) => unknown;
         AiSuggestionsSearchRequestUpdated: (payload: import("@empathyco/x-types").AiSuggestionsSearchRequest | null, metadata: WireMetadata) => unknown;
+        UserClickedAiOverviewExpandButton: (payload: boolean, metadata: WireMetadata) => unknown;
     }>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
 ```

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [trackAiOverviewButtonClickedWire](./x-components.trackaioverviewbuttonclickedwire.md)
+## trackAiOverviewButtonClickedWire variable
+Performs a track of clicking the AI overview expand button when the playload (expanded) is false.
+**Signature:**
+```typescript
+trackAiOverviewButtonClickedWire: Wire<any>
+```

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

@@ -27,8 +27,9 @@ elements: `buttonClass`.
 | Name                                    | Description                      | Bindings<br />(name - type - description) |
 | --------------------------------------- | -------------------------------- | ----------------------------------------- |
-| <code>sliding-panel-left-button</code>  | Left button content              | None                                      |
 | <code>default</code>                    | (Required) Sliding panel content | None                                      |
+| <code>sliding-panel-addons</code>       |                                  | <br />                                    |
+| <code>sliding-panel-left-button</code>  | Left button content              | None                                      |
 | <code>sliding-panel-right-button</code> | Right button content             | None                                      |
 ## Events

package/js/components/sliding-panel.vue.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import _sfc_main from './sliding-panel.vue2.js';
-import { openBlock, createElementBlock, normalizeClass, renderSlot, createTextVNode, createCommentVNode, createElementVNode } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, Fragment, createTextVNode, createCommentVNode } from 'vue';
 import './sliding-panel.vue3.js';
 import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
@@ -12,53 +12,60 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "data-test": "sliding-panel"
     },
     [
-      _ctx.showButtons ? (openBlock(), createElementBlock(
-        "button",
-        {
-          key: 0,
-          class: normalizeClass(["x-sliding-panel__button x-button x-sliding-panel-button-left", _ctx.buttonClass]),
-          "data-test": "sliding-panel-left-button",
-          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.scrollLeft && _ctx.scrollLeft(...args))
-        },
-        [
-          renderSlot(_ctx.$slots, "sliding-panel-left-button", {}, () => [
-            createTextVNode("ᐸ")
-          ], true)
-        ],
-        2
-        /* CLASS */
-      )) : createCommentVNode("v-if", true),
       createElementVNode(
         "div",
         {
           ref: "scrollContainerRef",
           class: normalizeClass([_ctx.scrollContainerClass, "x-sliding-panel__scroll"]),
-          "data-test": "sliding-panel-scroll",
-          onScroll: _cache[1] || (_cache[1] = (...args) => _ctx.debouncedUpdateScroll && _ctx.debouncedUpdateScroll(...args)),
-          onTransitionend: _cache[2] || (_cache[2] = (...args) => _ctx.debouncedUpdateScroll && _ctx.debouncedUpdateScroll(...args)),
-          onAnimationend: _cache[3] || (_cache[3] = (...args) => _ctx.debouncedUpdateScroll && _ctx.debouncedUpdateScroll(...args))
+          "data-test": "sliding-panel-scroll"
         },
         [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ],
-        34
-        /* CLASS, NEED_HYDRATION */
+        2
+        /* CLASS */
       ),
+      renderSlot(_ctx.$slots, "sliding-panel-addons", {
+        arrivedState: _ctx.arrivedState,
+        scroll: _ctx.xScroll
+      }, void 0, true),
       _ctx.showButtons ? (openBlock(), createElementBlock(
-        "button",
-        {
-          key: 1,
-          class: normalizeClass(["x-sliding-panel__button x-button x-sliding-panel-button-right", _ctx.buttonClass]),
-          "data-test": "sliding-panel-right-button",
-          onClick: _cache[4] || (_cache[4] = (...args) => _ctx.scrollRight && _ctx.scrollRight(...args))
-        },
+        Fragment,
+        { key: 0 },
         [
-          renderSlot(_ctx.$slots, "sliding-panel-right-button", {}, () => [
-            createTextVNode("ᐳ")
-          ], true)
+          createElementVNode(
+            "button",
+            {
+              class: normalizeClass(["x-sliding-panel__button x-button x-sliding-panel-button-left", _ctx.buttonClass]),
+              "data-test": "sliding-panel-left-button",
+              onClick: _cache[0] || (_cache[0] = ($event) => _ctx.xScroll -= _ctx.slotContainerWidth * _ctx.scrollFactor)
+            },
+            [
+              renderSlot(_ctx.$slots, "sliding-panel-left-button", {}, () => [
+                createTextVNode("ᐸ")
+              ], true)
+            ],
+            2
+            /* CLASS */
+          ),
+          createElementVNode(
+            "button",
+            {
+              class: normalizeClass(["x-sliding-panel__button x-button x-sliding-panel-button-right", _ctx.buttonClass]),
+              "data-test": "sliding-panel-right-button",
+              onClick: _cache[1] || (_cache[1] = ($event) => _ctx.xScroll += _ctx.slotContainerWidth * _ctx.scrollFactor)
+            },
+            [
+              renderSlot(_ctx.$slots, "sliding-panel-right-button", {}, () => [
+                createTextVNode("ᐳ")
+              ], true)
+            ],
+            2
+            /* CLASS */
+          )
         ],
-        2
-        /* CLASS */
+        64
+        /* STABLE_FRAGMENT */
       )) : createCommentVNode("v-if", true)
     ],
     2

package/js/components/sliding-panel.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sliding-panel.vue.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n <div v-if=\"slots.default\" class=\"x-sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n <button\n v-if=\"showButtons\"\n class=\"x-sliding-panel__button x-button x-sliding-panel-button-left\"\n :class=\"buttonClass\"\n data-test=\"sliding-panel-left-button\"\n @click=\"scrollLeft\"\n >\n <!-- @slot Left button content -->\n <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n </button>\n <div\n ref=\"scrollContainerRef\"\n :class=\"scrollContainerClass\"\n class=\"x-sliding-panel__scroll\"\n data-test=\"sliding-panel-scroll\"\n @scroll=\"debouncedUpdateScroll\"\n @transitionend=\"debouncedUpdateScroll\"\n @animationend=\"debouncedUpdateScroll\"\n >\n <!-- @slot (Required) Sliding panel content -->\n <slot />\n </div>\n <button\n v-if=\"showButtons\"\n class=\"x-sliding-panel__button x-button x-sliding-panel-button-right\"\n :class=\"buttonClass\"\n data-test=\"sliding-panel-right-button\"\n @click=\"scrollRight\"\n >\n <!-- @slot Right button content -->\n <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n </button>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../utils/types'\nimport { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { useDebounce } from '../composables/use-debounce'\n\n/*\n This component allows for any other component or element inside it to be horizontally\n * navigable. It also implements customizable buttons as well as other minor customizations to its\n * general behavior.\n \n Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n \n @public\n /\nexport default defineComponent({\n name: 'SlidingPanel',\n props: {\n /\n Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n /\n scrollFactor: {\n type: Number,\n default: 0.7,\n },\n /* Would make the navigation buttons visible when they're needed or always hide them. /\n showButtons: {\n type: Boolean,\n default: true,\n },\n /\n When true, whenever the DOM content in the sliding panel slot changes, it will reset\n * the scroll position to 0.\n /\n resetOnContentChange: {\n type: Boolean,\n default: true,\n },\n buttonClass: { type: [String, Object, Array] as PropType<VueCSSClasses> },\n scrollContainerClass: { type: [String, Object, Array] as PropType<VueCSSClasses> },\n },\n setup(props, { slots }) {\n /* Indicates if the scroll is at the start of the sliding panel. /\n const isScrollAtStart = ref(true)\n /* Indicates if the scroll is at the end of the sliding panel. /\n const isScrollAtEnd = ref(true)\n const scrollContainerRef = ref<HTMLDivElement>()\n\n /\n Updates the values of the scroll positions to show or hide the buttons depending on it.\n \n @remarks The 2px extra is to fix some cases in some resolutions where the scroll + client\n * size is less than the scroll width even when the scroll is at the end.\n /\n function updateScrollPosition() {\n if (scrollContainerRef.value) {\n const { scrollLeft, clientWidth, scrollWidth } = scrollContainerRef.value\n isScrollAtStart.value = !scrollLeft\n isScrollAtEnd.value = scrollLeft + clientWidth + 2 >= scrollWidth\n }\n }\n\n /\n Debounced version of the {@link SlidingPanel.updateScrollPosition} method.\n /\n const debouncedUpdateScroll = useDebounce(updateScrollPosition, 50, { leading: true })\n\n /\n Resets the scroll and updates the values of the scroll for the buttons to react.\n /\n const debouncedRestoreAndUpdateScroll = useDebounce(\n () => {\n scrollContainerRef.value!.scroll({ left: 0, behavior: 'smooth' })\n updateScrollPosition()\n },\n 50,\n { leading: true },\n )\n\n /\n Scrolls the wrapper element towards the provided scroll value.\n \n @param scrollValue - The value the scroll will go towards.\n /\n function scrollTo(scrollValue: number) {\n scrollContainerRef.value!.scrollBy({\n left: scrollValue props.scrollFactor,\n behavior: 'smooth',\n })\n }\n\n /** Scrolls the wrapper element to the left. /\n function scrollLeft() {\n scrollTo(-scrollContainerRef.value!.clientWidth)\n }\n\n /* Scrolls the wrapper element to the right. /\n function scrollRight() {\n scrollTo(scrollContainerRef.value!.clientWidth)\n }\n\n /* CSS classes to apply based on the scroll position. /\n const cssClasses = computed(() => ({\n 'x-sliding-panel-at-start': isScrollAtStart.value,\n 'x-sliding-panel-at-end': isScrollAtEnd.value,\n }))\n\n let resizeObserver: ResizeObserver\n let contentChangedObserver: MutationObserver\n\n /\n Initialises browser platform code:\n * - Creates a mutation observer to detect content changes and reset scroll position.\n * - Stores initial size and scroll position values.\n /\n onMounted(() => {\n resizeObserver = new ResizeObserver(debouncedUpdateScroll)\n resizeObserver.observe(scrollContainerRef.value!)\n contentChangedObserver = new MutationObserver(debouncedRestoreAndUpdateScroll)\n\n watch(\n () => props.resetOnContentChange,\n shouldReset => {\n if (shouldReset) {\n contentChangedObserver.observe(scrollContainerRef.value!, {\n subtree: true,\n childList: true,\n attributes: false,\n characterData: false,\n })\n } else {\n contentChangedObserver.disconnect()\n }\n },\n { immediate: true },\n )\n\n updateScrollPosition()\n })\n\n onBeforeUnmount(() => {\n contentChangedObserver.disconnect()\n resizeObserver.disconnect()\n })\n\n return {\n cssClasses,\n debouncedUpdateScroll,\n scrollContainerRef,\n scrollLeft,\n scrollRight,\n slots,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-sliding-panel {\n align-items: center;\n display: flex;\n flex-flow: row nowrap;\n position: relative;\n}\n\n.x-sliding-panel__button {\n opacity: 0;\n pointer-events: none;\n position: absolute;\n transition: all ease-out 0.2s;\n z-index: 2; / To overlay the design system gradient with z-index:1 /\n}\n.x-sliding-panel-button-left {\n left: 0;\n}\n.x-sliding-panel-button-right {\n right: 0;\n}\n\n.x-sliding-panel__scroll {\n display: flex;\n flex: 100%;\n flex-flow: row nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none; / Firefox /\n -ms-overflow-style: none; / IE /\n}\n\n/ Chrome, Edge & Safari /\n.x-sliding-panel__scroll::-webkit-scrollbar {\n display: none;\n}\n\n.x-sliding-panel__scroll > {\n flex: 0 0 auto;\n}\n\n/* prettier-ignore /\n.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {\n opacity: 1;\n pointer-events: all;\n }\n\n/ prettier-ignore */\n.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {\n opacity: 1;\n pointer-events: all;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<template>\n <SlidingPanel>\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n\n### Play with props\n\n#### Modifying scroll buttons travel distance\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`\nprop.\n\n```vue\n<template>\n <SlidingPanel :scrollFactor=\"1.5\">\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n\n#### Hiding scroll buttons\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<template>\n <SlidingPanel :showButtons=\"false\">\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n\n#### Customizing the content with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\nThe `scrollContainerClass` prop can be used to add classes to the scroll content.\n\n```vue\n<template>\n <SlidingPanel buttonClass=\"x-button--round\" scrollContainerClass=\"x-sliding-panel-fade\">\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n\n#### Disabling reset the scroll when content changes\n\nBy default, whenever the content of the sliding panel changes, it auto resets its scroll position.\nYou can disable this behavior setting the `resetOnContentChange` prop to `false`.\n\n```vue\n<template>\n <div>\n <button @click=\"items++\">Add item</button>\n <label>\n <input type=\"checkbox\" v-model=\"resetOnContentChange\" />\n Reset content onchange\n </label>\n <SlidingPanel :resetOnContentChange=\"resetOnContentChange\">\n <div class=\"item\" v-for=\"item in items\" :key=\"item\">Item {{ item }}</div>\n </SlidingPanel>\n </div>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n data() {\n return {\n items: 4,\n resetOnContentChange: false,\n }\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n\n## Extending the component\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<template>\n <SlidingPanel>\n <template #sliding-panel-left-button>Left</template>\n <template #default>\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </template>\n <template #sliding-panel-right-button>Right</template>\n </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_renderSlot","_createTextVNode","_createCommentVNode","_createElementVNode"],"mappings":"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"}
1	+ {"version":3,"file":"sliding-panel.vue.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n <div v-if=\"slots.default\" class=\"x-sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n <div\n ref=\"scrollContainerRef\"\n :class=\"scrollContainerClass\"\n class=\"x-sliding-panel__scroll\"\n data-test=\"sliding-panel-scroll\"\n >\n <!-- @slot (Required) Sliding panel content -->\n <slot />\n </div>\n <slot name=\"sliding-panel-addons\" :arrived-state=\"arrivedState\" :scroll=\"xScroll\" />\n <template v-if=\"showButtons\">\n <button\n class=\"x-sliding-panel__button x-button x-sliding-panel-button-left\"\n :class=\"buttonClass\"\n data-test=\"sliding-panel-left-button\"\n @click=\"xScroll -= slotContainerWidth * scrollFactor\"\n >\n <!-- @slot Left button content -->\n <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n </button>\n <button\n class=\"x-sliding-panel__button x-button x-sliding-panel-button-right\"\n :class=\"buttonClass\"\n data-test=\"sliding-panel-right-button\"\n @click=\"xScroll += slotContainerWidth * scrollFactor\"\n >\n <!-- @slot Right button content -->\n <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n </button>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../utils/types'\nimport {\n useElementBounding,\n useElementVisibility,\n useMutationObserver,\n useScroll,\n whenever,\n} from '@vueuse/core'\nimport { computed, defineComponent, ref } from 'vue'\n\n/*\n This component allows for any other component or element inside it to be horizontally\n * navigable. It also implements customizable buttons as well as other minor customizations to its\n * general behavior.\n \n Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n \n @public\n /\nexport default defineComponent({\n name: 'SlidingPanel',\n props: {\n /\n Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n /\n scrollFactor: {\n type: Number,\n default: 0.7,\n },\n /* Would make the navigation buttons visible when they're needed or always hide them. /\n showButtons: {\n type: Boolean,\n default: true,\n },\n /\n When true, whenever the DOM content in the sliding panel slot changes, it will reset\n * the scroll position to 0.\n /\n resetOnContentChange: {\n type: Boolean,\n default: true,\n },\n buttonClass: { type: [String, Object, Array] as PropType<VueCSSClasses> },\n scrollContainerClass: { type: [String, Object, Array] as PropType<VueCSSClasses> },\n },\n setup(props, { slots }) {\n const scrollContainerRef = ref<HTMLDivElement>()\n\n const { width: slotContainerWidth } = useElementBounding(scrollContainerRef)\n const isVisible = useElementVisibility(scrollContainerRef)\n\n const {\n x: xScroll,\n arrivedState,\n measure,\n } = useScroll(scrollContainerRef, {\n behavior: 'smooth',\n })\n\n /* CSS classes to apply based on the scroll position. /\n const cssClasses = computed(() => ({\n 'x-sliding-panel-at-start': arrivedState.left,\n 'x-sliding-panel-at-end': arrivedState.right,\n }))\n\n if (props.resetOnContentChange) {\n useMutationObserver(\n scrollContainerRef,\n mutations => {\n if (mutations.length > 0) {\n xScroll.value = 0\n }\n },\n {\n subtree: true,\n childList: true,\n attributes: false,\n characterData: false,\n },\n )\n }\n //ensure positions are right calculated as soon as the sliding panel is shown\n whenever(isVisible, measure)\n\n return {\n arrivedState,\n cssClasses,\n scrollContainerRef,\n slotContainerWidth,\n xScroll,\n slots,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-sliding-panel {\n align-items: center;\n display: flex;\n flex-flow: row nowrap;\n position: relative;\n}\n\n.x-sliding-panel__button {\n opacity: 0;\n pointer-events: none;\n position: absolute;\n transition: all ease-out 0.2s;\n z-index: 2; / To overlay the design system gradient with z-index:1 /\n}\n.x-sliding-panel-button-left {\n left: var(--x-sliding-panel-buttons-distance, 0);\n}\n.x-sliding-panel-button-right {\n right: var(--x-sliding-panel-buttons-distance, 0);\n}\n\n.x-sliding-panel__scroll {\n display: flex;\n flex: 100%;\n flex-flow: row nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none; / Firefox /\n -ms-overflow-style: none; / IE /\n}\n\n/ Chrome, Edge & Safari /\n.x-sliding-panel__scroll::-webkit-scrollbar {\n display: none;\n}\n\n.x-sliding-panel__scroll > {\n flex: 0 0 auto;\n}\n\n/* prettier-ignore /\n.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {\n opacity: 1;\n pointer-events: all;\n }\n\n/ prettier-ignore */\n.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {\n opacity: 1;\n pointer-events: all;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<template>\n <SlidingPanel>\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n\n### Play with props\n\n#### Modifying scroll buttons travel distance\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`\nprop.\n\n```vue\n<template>\n <SlidingPanel :scrollFactor=\"1.5\">\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n\n#### Hiding scroll buttons\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<template>\n <SlidingPanel :showButtons=\"false\">\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n\n#### Customizing the content with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\nThe `scrollContainerClass` prop can be used to add classes to the scroll content.\n\n```vue\n<template>\n <SlidingPanel buttonClass=\"x-button--round\" scrollContainerClass=\"x-sliding-panel-fade\">\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n\n#### Disabling reset the scroll when content changes\n\nBy default, whenever the content of the sliding panel changes, it auto resets its scroll position.\nYou can disable this behavior setting the `resetOnContentChange` prop to `false`.\n\n```vue\n<template>\n <div>\n <button @click=\"items++\">Add item</button>\n <label>\n <input type=\"checkbox\" v-model=\"resetOnContentChange\" />\n Reset content onchange\n </label>\n <SlidingPanel :resetOnContentChange=\"resetOnContentChange\">\n <div class=\"item\" v-for=\"item in items\" :key=\"item\">Item {{ item }}</div>\n </SlidingPanel>\n </div>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n data() {\n return {\n items: 4,\n resetOnContentChange: false,\n }\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n\n## Extending the component\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<template>\n <SlidingPanel>\n <template #sliding-panel-left-button>Left</template>\n <template #default>\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </template>\n <template #sliding-panel-right-button>Right</template>\n </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_Fragment","_createTextVNode","_createCommentVNode"],"mappings":";;;;;;AACa,EAAA,OAAA,IAAA,CAAA,KAAA,CAAM,OAAjB,IAAAA,SAAA,EAAA,EAAAC,kBAAA;AAAA,IA+BM,KAAA;AAAA,IAAA;AAAA,MAhCR,GAAA,EAAA,CAAA;AAAA,MAC4B,KAAA,EAD5BC,cACkC,CAAA,CAAA,iBAAA,EAA0B,IAAU,CAAA,UAAA,CAAA,CAAA;AAAA,MAAE,WAAU,EAAA,eAAA;AAAA,KAAA;;AAC9E,MAAAC,kBAAA;AAAA,QAQM,KAAA;AAAA,QAAA;AAAA,UAPJ,GAAI,EAAA,oBAAA;AAAA,UACH,KAAA,EAJPD,cAIc,CAAA,CAAA,IAAA,CAAA,oBAAA,EACF,yBAAyB,CAAA,CAAA;AAAA,UAC/B,WAAU,EAAA,sBAAA;AAAA,SAAA;;UAGVE,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,SAAA;;;;MAEVA,UAAoF,CAAA,IAAA,CAAA,MAAA,EAAA,sBAAA,EAAA;AAAA,QAAjD,YAAe,EAAA,IAAA,CAAA,YAAA;AAAA,QAAe,MAAQ,EAAA,IAAA,CAAA,OAAA;AAAA,OAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;MACzD,IAAhB,CAAA,WAAA,IAAAJ,SAAA,EAAA,EAAAC,kBAAA;AAAA,QAmBWI,QAAA;AAAA,QA/Bf,EAAA,GAAA,EAAA,CAAA,EAAA;AAAA,QAAA;AAAA,UAaMF,kBAAA;AAAA,YAQS,QAAA;AAAA,YAAA;AAAA,cAPP,KAAA,EAdRD,cAcc,CAAA,CAAA,8DAAA,EACE,IAAW,CAAA,WAAA,CAAA,CAAA;AAAA,cACnB,WAAU,EAAA,2BAAA;AAAA,cACT,OAAA,EAAK,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,OAAA,IAAW,IAAqB,CAAA,kBAAA,GAAA,IAAA,CAAA,YAAA,CAAA;AAAA,aAAA;;AAGxC,cAAAE,UAAA,CAA+C,8CAA/C,MAA+C;AAAA,gBApBvDE,gBAoB+C,GAAC,CAAA;AAAA,eAAA,EAAA,IAAA,CAAA;;;;;AAE1C,UAAAH,kBAAA;AAAA,YAQS,QAAA;AAAA,YAAA;AAAA,cAPP,KAAA,EAvBRD,cAuBc,CAAA,CAAA,+DAAA,EACE,IAAW,CAAA,WAAA,CAAA,CAAA;AAAA,cACnB,WAAU,EAAA,4BAAA;AAAA,cACT,OAAA,EAAK,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,OAAA,IAAW,IAAqB,CAAA,kBAAA,GAAA,IAAA,CAAA,YAAA,CAAA;AAAA,aAAA;;AAGxC,cAAAE,UAAA,CAAgD,+CAAhD,MAAgD;AAAA,gBA7BxDE,gBA6BgD,GAAC,CAAA;AAAA,eAAA,EAAA,IAAA,CAAA;;;;;;;;AA7BjD,OAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,KAAA;;;AAAA,GAAA,IAAAA,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/components/sliding-panel.vue2.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { defineComponent, ref, computed, onMounted, watch, onBeforeUnmount } from 'vue';
-import { useDebounce } from '../composables/use-debounce.js';
+import { useElementBounding, useElementVisibility, useScroll, useMutationObserver, whenever } from '@vueuse/core';
+import { defineComponent, ref, computed } from 'vue';
 /**
  * This component allows for any other component or element inside it to be horizontally
@@ -38,95 +38,37 @@ var _sfc_main = defineComponent({
         scrollContainerClass: { type: [String, Object, Array] },
     },
     setup(props, { slots }) {
-        /** Indicates if the scroll is at the start of the sliding panel. */
-        const isScrollAtStart = ref(true);
-        /** Indicates if the scroll is at the end of the sliding panel. */
-        const isScrollAtEnd = ref(true);
         const scrollContainerRef = ref();
-        /**
-         * Updates the values of the scroll positions to show or hide the buttons depending on it.
-         *
-         * @remarks The 2px extra is to fix some cases in some resolutions where the scroll + client
-         * size is less than the scroll width even when the scroll is at the end.
-         */
-        function updateScrollPosition() {
-            if (scrollContainerRef.value) {
-                const { scrollLeft, clientWidth, scrollWidth } = scrollContainerRef.value;
-                isScrollAtStart.value = !scrollLeft;
-                isScrollAtEnd.value = scrollLeft + clientWidth + 2 >= scrollWidth;
-            }
-        }
-        /**
-         * Debounced version of the {@link SlidingPanel.updateScrollPosition} method.
-         */
-        const debouncedUpdateScroll = useDebounce(updateScrollPosition, 50, { leading: true });
-        /**
-         * Resets the scroll and updates the values of the scroll for the buttons to react.
-         */
-        const debouncedRestoreAndUpdateScroll = useDebounce(() => {
-            scrollContainerRef.value.scroll({ left: 0, behavior: 'smooth' });
-            updateScrollPosition();
-        }, 50, { leading: true });
-        /**
-         * Scrolls the wrapper element towards the provided scroll value.
-         *
-         * @param scrollValue - The value the scroll will go towards.
-         */
-        function scrollTo(scrollValue) {
-            scrollContainerRef.value.scrollBy({
-                left: scrollValue * props.scrollFactor,
-                behavior: 'smooth',
-            });
-        }
-        /** Scrolls the wrapper element to the left. */
-        function scrollLeft() {
-            scrollTo(-scrollContainerRef.value.clientWidth);
-        }
-        /** Scrolls the wrapper element to the right. */
-        function scrollRight() {
-            scrollTo(scrollContainerRef.value.clientWidth);
-        }
+        const { width: slotContainerWidth } = useElementBounding(scrollContainerRef);
+        const isVisible = useElementVisibility(scrollContainerRef);
+        const { x: xScroll, arrivedState, measure, } = useScroll(scrollContainerRef, {
+            behavior: 'smooth',
+        });
         /** CSS classes to apply based on the scroll position. */
         const cssClasses = computed(() => ({
-            'x-sliding-panel-at-start': isScrollAtStart.value,
-            'x-sliding-panel-at-end': isScrollAtEnd.value,
+            'x-sliding-panel-at-start': arrivedState.left,
+            'x-sliding-panel-at-end': arrivedState.right,
         }));
-        let resizeObserver;
-        let contentChangedObserver;
-        /**
-         * Initialises browser platform code:
-         * - Creates a mutation observer to detect content changes and reset scroll position.
-         * - Stores initial size and scroll position values.
-         */
-        onMounted(() => {
-            resizeObserver = new ResizeObserver(debouncedUpdateScroll);
-            resizeObserver.observe(scrollContainerRef.value);
-            contentChangedObserver = new MutationObserver(debouncedRestoreAndUpdateScroll);
-            watch(() => props.resetOnContentChange, shouldReset => {
-                if (shouldReset) {
-                    contentChangedObserver.observe(scrollContainerRef.value, {
-                        subtree: true,
-                        childList: true,
-                        attributes: false,
-                        characterData: false,
-                    });
+        if (props.resetOnContentChange) {
+            useMutationObserver(scrollContainerRef, mutations => {
+                if (mutations.length > 0) {
+                    xScroll.value = 0;
                 }
-                else {
-                    contentChangedObserver.disconnect();
-                }
-            }, { immediate: true });
-            updateScrollPosition();
-        });
-        onBeforeUnmount(() => {
-            contentChangedObserver.disconnect();
-            resizeObserver.disconnect();
-        });
+            }, {
+                subtree: true,
+                childList: true,
+                attributes: false,
+                characterData: false,
+            });
+        }
+        //ensure positions are right calculated as soon as the sliding panel is shown
+        whenever(isVisible, measure);
         return {
+            arrivedState,
             cssClasses,
-            debouncedUpdateScroll,
             scrollContainerRef,
-            scrollLeft,
-            scrollRight,
+            slotContainerWidth,
+            xScroll,
             slots,
         };
     },

package/js/components/sliding-panel.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sliding-panel.vue2.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n <div v-if=\"slots.default\" class=\"x-sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n <button\n v-if=\"showButtons\"\n class=\"x-sliding-panel__button x-button x-sliding-panel-button-left\"\n :class=\"buttonClass\"\n data-test=\"sliding-panel-left-button\"\n @click=\"scrollLeft\"\n >\n <!-- @slot Left button content -->\n <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n </button>\n <div\n ref=\"scrollContainerRef\"\n :class=\"scrollContainerClass\"\n class=\"x-sliding-panel__scroll\"\n data-test=\"sliding-panel-scroll\"\n @scroll=\"debouncedUpdateScroll\"\n @transitionend=\"debouncedUpdateScroll\"\n @animationend=\"debouncedUpdateScroll\"\n >\n <!-- @slot (Required) Sliding panel content -->\n <slot />\n </div>\n <button\n v-if=\"showButtons\"\n class=\"x-sliding-panel__button x-button x-sliding-panel-button-right\"\n :class=\"buttonClass\"\n data-test=\"sliding-panel-right-button\"\n @click=\"scrollRight\"\n >\n <!-- @slot Right button content -->\n <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n </button>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../utils/types'\nimport { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { useDebounce } from '../composables/use-debounce'\n\n/*\n This component allows for any other component or element inside it to be horizontally\n * navigable. It also implements customizable buttons as well as other minor customizations to its\n * general behavior.\n \n Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n \n @public\n /\nexport default defineComponent({\n name: 'SlidingPanel',\n props: {\n /\n Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n /\n scrollFactor: {\n type: Number,\n default: 0.7,\n },\n /* Would make the navigation buttons visible when they're needed or always hide them. /\n showButtons: {\n type: Boolean,\n default: true,\n },\n /\n When true, whenever the DOM content in the sliding panel slot changes, it will reset\n * the scroll position to 0.\n /\n resetOnContentChange: {\n type: Boolean,\n default: true,\n },\n buttonClass: { type: [String, Object, Array] as PropType<VueCSSClasses> },\n scrollContainerClass: { type: [String, Object, Array] as PropType<VueCSSClasses> },\n },\n setup(props, { slots }) {\n /* Indicates if the scroll is at the start of the sliding panel. /\n const isScrollAtStart = ref(true)\n /* Indicates if the scroll is at the end of the sliding panel. /\n const isScrollAtEnd = ref(true)\n const scrollContainerRef = ref<HTMLDivElement>()\n\n /\n Updates the values of the scroll positions to show or hide the buttons depending on it.\n \n @remarks The 2px extra is to fix some cases in some resolutions where the scroll + client\n * size is less than the scroll width even when the scroll is at the end.\n /\n function updateScrollPosition() {\n if (scrollContainerRef.value) {\n const { scrollLeft, clientWidth, scrollWidth } = scrollContainerRef.value\n isScrollAtStart.value = !scrollLeft\n isScrollAtEnd.value = scrollLeft + clientWidth + 2 >= scrollWidth\n }\n }\n\n /\n Debounced version of the {@link SlidingPanel.updateScrollPosition} method.\n /\n const debouncedUpdateScroll = useDebounce(updateScrollPosition, 50, { leading: true })\n\n /\n Resets the scroll and updates the values of the scroll for the buttons to react.\n /\n const debouncedRestoreAndUpdateScroll = useDebounce(\n () => {\n scrollContainerRef.value!.scroll({ left: 0, behavior: 'smooth' })\n updateScrollPosition()\n },\n 50,\n { leading: true },\n )\n\n /\n Scrolls the wrapper element towards the provided scroll value.\n \n @param scrollValue - The value the scroll will go towards.\n /\n function scrollTo(scrollValue: number) {\n scrollContainerRef.value!.scrollBy({\n left: scrollValue props.scrollFactor,\n behavior: 'smooth',\n })\n }\n\n /** Scrolls the wrapper element to the left. /\n function scrollLeft() {\n scrollTo(-scrollContainerRef.value!.clientWidth)\n }\n\n /* Scrolls the wrapper element to the right. /\n function scrollRight() {\n scrollTo(scrollContainerRef.value!.clientWidth)\n }\n\n /* CSS classes to apply based on the scroll position. /\n const cssClasses = computed(() => ({\n 'x-sliding-panel-at-start': isScrollAtStart.value,\n 'x-sliding-panel-at-end': isScrollAtEnd.value,\n }))\n\n let resizeObserver: ResizeObserver\n let contentChangedObserver: MutationObserver\n\n /\n Initialises browser platform code:\n * - Creates a mutation observer to detect content changes and reset scroll position.\n * - Stores initial size and scroll position values.\n /\n onMounted(() => {\n resizeObserver = new ResizeObserver(debouncedUpdateScroll)\n resizeObserver.observe(scrollContainerRef.value!)\n contentChangedObserver = new MutationObserver(debouncedRestoreAndUpdateScroll)\n\n watch(\n () => props.resetOnContentChange,\n shouldReset => {\n if (shouldReset) {\n contentChangedObserver.observe(scrollContainerRef.value!, {\n subtree: true,\n childList: true,\n attributes: false,\n characterData: false,\n })\n } else {\n contentChangedObserver.disconnect()\n }\n },\n { immediate: true },\n )\n\n updateScrollPosition()\n })\n\n onBeforeUnmount(() => {\n contentChangedObserver.disconnect()\n resizeObserver.disconnect()\n })\n\n return {\n cssClasses,\n debouncedUpdateScroll,\n scrollContainerRef,\n scrollLeft,\n scrollRight,\n slots,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-sliding-panel {\n align-items: center;\n display: flex;\n flex-flow: row nowrap;\n position: relative;\n}\n\n.x-sliding-panel__button {\n opacity: 0;\n pointer-events: none;\n position: absolute;\n transition: all ease-out 0.2s;\n z-index: 2; / To overlay the design system gradient with z-index:1 /\n}\n.x-sliding-panel-button-left {\n left: 0;\n}\n.x-sliding-panel-button-right {\n right: 0;\n}\n\n.x-sliding-panel__scroll {\n display: flex;\n flex: 100%;\n flex-flow: row nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none; / Firefox /\n -ms-overflow-style: none; / IE /\n}\n\n/ Chrome, Edge & Safari /\n.x-sliding-panel__scroll::-webkit-scrollbar {\n display: none;\n}\n\n.x-sliding-panel__scroll > {\n flex: 0 0 auto;\n}\n\n/* prettier-ignore /\n.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {\n opacity: 1;\n pointer-events: all;\n }\n\n/ prettier-ignore */\n.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {\n opacity: 1;\n pointer-events: all;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<template>\n <SlidingPanel>\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n\n### Play with props\n\n#### Modifying scroll buttons travel distance\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`\nprop.\n\n```vue\n<template>\n <SlidingPanel :scrollFactor=\"1.5\">\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n\n#### Hiding scroll buttons\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<template>\n <SlidingPanel :showButtons=\"false\">\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n\n#### Customizing the content with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\nThe `scrollContainerClass` prop can be used to add classes to the scroll content.\n\n```vue\n<template>\n <SlidingPanel buttonClass=\"x-button--round\" scrollContainerClass=\"x-sliding-panel-fade\">\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n\n#### Disabling reset the scroll when content changes\n\nBy default, whenever the content of the sliding panel changes, it auto resets its scroll position.\nYou can disable this behavior setting the `resetOnContentChange` prop to `false`.\n\n```vue\n<template>\n <div>\n <button @click=\"items++\">Add item</button>\n <label>\n <input type=\"checkbox\" v-model=\"resetOnContentChange\" />\n Reset content onchange\n </label>\n <SlidingPanel :resetOnContentChange=\"resetOnContentChange\">\n <div class=\"item\" v-for=\"item in items\" :key=\"item\">Item {{ item }}</div>\n </SlidingPanel>\n </div>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n data() {\n return {\n items: 4,\n resetOnContentChange: false,\n }\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n\n## Extending the component\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<template>\n <SlidingPanel>\n <template #sliding-panel-left-button>Left</template>\n <template #default>\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </template>\n <template #sliding-panel-right-button>Right</template>\n </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n</docs>\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"sliding-panel.vue2.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n <div v-if=\"slots.default\" class=\"x-sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n <div\n ref=\"scrollContainerRef\"\n :class=\"scrollContainerClass\"\n class=\"x-sliding-panel__scroll\"\n data-test=\"sliding-panel-scroll\"\n >\n <!-- @slot (Required) Sliding panel content -->\n <slot />\n </div>\n <slot name=\"sliding-panel-addons\" :arrived-state=\"arrivedState\" :scroll=\"xScroll\" />\n <template v-if=\"showButtons\">\n <button\n class=\"x-sliding-panel__button x-button x-sliding-panel-button-left\"\n :class=\"buttonClass\"\n data-test=\"sliding-panel-left-button\"\n @click=\"xScroll -= slotContainerWidth * scrollFactor\"\n >\n <!-- @slot Left button content -->\n <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n </button>\n <button\n class=\"x-sliding-panel__button x-button x-sliding-panel-button-right\"\n :class=\"buttonClass\"\n data-test=\"sliding-panel-right-button\"\n @click=\"xScroll += slotContainerWidth * scrollFactor\"\n >\n <!-- @slot Right button content -->\n <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n </button>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../utils/types'\nimport {\n useElementBounding,\n useElementVisibility,\n useMutationObserver,\n useScroll,\n whenever,\n} from '@vueuse/core'\nimport { computed, defineComponent, ref } from 'vue'\n\n/*\n This component allows for any other component or element inside it to be horizontally\n * navigable. It also implements customizable buttons as well as other minor customizations to its\n * general behavior.\n \n Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n \n @public\n /\nexport default defineComponent({\n name: 'SlidingPanel',\n props: {\n /\n Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n /\n scrollFactor: {\n type: Number,\n default: 0.7,\n },\n /* Would make the navigation buttons visible when they're needed or always hide them. /\n showButtons: {\n type: Boolean,\n default: true,\n },\n /\n When true, whenever the DOM content in the sliding panel slot changes, it will reset\n * the scroll position to 0.\n /\n resetOnContentChange: {\n type: Boolean,\n default: true,\n },\n buttonClass: { type: [String, Object, Array] as PropType<VueCSSClasses> },\n scrollContainerClass: { type: [String, Object, Array] as PropType<VueCSSClasses> },\n },\n setup(props, { slots }) {\n const scrollContainerRef = ref<HTMLDivElement>()\n\n const { width: slotContainerWidth } = useElementBounding(scrollContainerRef)\n const isVisible = useElementVisibility(scrollContainerRef)\n\n const {\n x: xScroll,\n arrivedState,\n measure,\n } = useScroll(scrollContainerRef, {\n behavior: 'smooth',\n })\n\n /* CSS classes to apply based on the scroll position. /\n const cssClasses = computed(() => ({\n 'x-sliding-panel-at-start': arrivedState.left,\n 'x-sliding-panel-at-end': arrivedState.right,\n }))\n\n if (props.resetOnContentChange) {\n useMutationObserver(\n scrollContainerRef,\n mutations => {\n if (mutations.length > 0) {\n xScroll.value = 0\n }\n },\n {\n subtree: true,\n childList: true,\n attributes: false,\n characterData: false,\n },\n )\n }\n //ensure positions are right calculated as soon as the sliding panel is shown\n whenever(isVisible, measure)\n\n return {\n arrivedState,\n cssClasses,\n scrollContainerRef,\n slotContainerWidth,\n xScroll,\n slots,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-sliding-panel {\n align-items: center;\n display: flex;\n flex-flow: row nowrap;\n position: relative;\n}\n\n.x-sliding-panel__button {\n opacity: 0;\n pointer-events: none;\n position: absolute;\n transition: all ease-out 0.2s;\n z-index: 2; / To overlay the design system gradient with z-index:1 /\n}\n.x-sliding-panel-button-left {\n left: var(--x-sliding-panel-buttons-distance, 0);\n}\n.x-sliding-panel-button-right {\n right: var(--x-sliding-panel-buttons-distance, 0);\n}\n\n.x-sliding-panel__scroll {\n display: flex;\n flex: 100%;\n flex-flow: row nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none; / Firefox /\n -ms-overflow-style: none; / IE /\n}\n\n/ Chrome, Edge & Safari /\n.x-sliding-panel__scroll::-webkit-scrollbar {\n display: none;\n}\n\n.x-sliding-panel__scroll > {\n flex: 0 0 auto;\n}\n\n/* prettier-ignore /\n.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {\n opacity: 1;\n pointer-events: all;\n }\n\n/ prettier-ignore */\n.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {\n opacity: 1;\n pointer-events: all;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<template>\n <SlidingPanel>\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n\n### Play with props\n\n#### Modifying scroll buttons travel distance\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`\nprop.\n\n```vue\n<template>\n <SlidingPanel :scrollFactor=\"1.5\">\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n\n#### Hiding scroll buttons\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<template>\n <SlidingPanel :showButtons=\"false\">\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n\n#### Customizing the content with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\nThe `scrollContainerClass` prop can be used to add classes to the scroll content.\n\n```vue\n<template>\n <SlidingPanel buttonClass=\"x-button--round\" scrollContainerClass=\"x-sliding-panel-fade\">\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n\n#### Disabling reset the scroll when content changes\n\nBy default, whenever the content of the sliding panel changes, it auto resets its scroll position.\nYou can disable this behavior setting the `resetOnContentChange` prop to `false`.\n\n```vue\n<template>\n <div>\n <button @click=\"items++\">Add item</button>\n <label>\n <input type=\"checkbox\" v-model=\"resetOnContentChange\" />\n Reset content onchange\n </label>\n <SlidingPanel :resetOnContentChange=\"resetOnContentChange\">\n <div class=\"item\" v-for=\"item in items\" :key=\"item\">Item {{ item }}</div>\n </SlidingPanel>\n </div>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n data() {\n return {\n items: 4,\n resetOnContentChange: false,\n }\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n\n## Extending the component\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<template>\n <SlidingPanel>\n <template #sliding-panel-left-button>Left</template>\n <template #default>\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </template>\n <template #sliding-panel-right-button>Right</template>\n </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel,\n },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n width: 200px;\n}\n\n.item {\n display: inline-block;\n width: 100px;\n}\n</style>\n```\n</docs>\n"],"names":[],"mappings":";;;AA+CA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAG;AACb,SAAA;;AAED,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;AAGE;AACF,QAAA,oBAAoB,EAAE;AACpB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;QACD,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,GAA8B;QACzE,oBAAoB,EAAE,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,GAA8B;AACnF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,kBAAmB,GAAE,GAAG,EAAiB,CAAA;QAE/C,MAAM,EAAE,KAAK,EAAE,kBAAmB,EAAA,GAAI,kBAAkB,CAAC,kBAAkB,CAAA,CAAA;AAC3E,QAAA,MAAM,YAAY,oBAAoB,CAAC,kBAAkB,CAAA,CAAA;AAEzD,QAAA,MAAM,EACJ,CAAC,EAAE,OAAO,EACV,YAAY,EACZ,OAAO,GACT,GAAI,SAAS,CAAC,kBAAkB,EAAE;AAChC,YAAA,QAAQ,EAAE,QAAQ;AACnB,SAAA,CAAA,CAAA;;AAGD,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAC,OAAO;YACjC,0BAA0B,EAAE,YAAY,CAAC,IAAI;YAC7C,wBAAwB,EAAE,YAAY,CAAC,KAAK;AAC7C,SAAA,CAAC,CAAA,CAAA;AAEF,QAAA,IAAI,KAAK,CAAC,oBAAoB,EAAE;AAC9B,YAAA,mBAAmB,CACjB,kBAAkB,EAClB,SAAU,IAAG;AACX,gBAAA,IAAI,SAAS,CAAC,MAAO,GAAE,CAAC,EAAE;AACxB,oBAAA,OAAO,CAAC,KAAI,GAAI,CAAA,CAAA;iBAClB;AACF,aAAC,EACD;AACE,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,UAAU,EAAE,KAAK;AACjB,gBAAA,aAAa,EAAE,KAAK;AACrB,aAAA,CACH,CAAA;SACF;;AAEA,QAAA,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAA,CAAA;QAE3B,OAAO;YACL,YAAY;YACZ,UAAU;YACV,kBAAkB;YAClB,kBAAkB;YAClB,OAAO;YACP,KAAK;SACP,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/components/sliding-panel.vue3.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import injectCss from '../../tools/inject-css.js';
-var css = ".x-sliding-panel[data-v-9402d5ce]{align-items:center;display:flex;flex-flow:row nowrap;position:relative}.x-sliding-panel__button[data-v-9402d5ce]{opacity:0;pointer-events:none;position:absolute;transition:all .2s ease-out;z-index:2}.x-sliding-panel-button-left[data-v-9402d5ce]{left:0}.x-sliding-panel-button-right[data-v-9402d5ce]{right:0}.x-sliding-panel__scroll[data-v-9402d5ce]{-ms-overflow-style:none;display:flex;flex:100%;flex-flow:row nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.x-sliding-panel__scroll[data-v-9402d5ce]::-webkit-scrollbar{display:none}.x-sliding-panel__scroll[data-v-9402d5ce]>*{flex:0 0 auto}.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right[data-v-9402d5ce],.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left[data-v-9402d5ce]{opacity:1;pointer-events:all}";
+var css = ".x-sliding-panel[data-v-9402d5ce]{align-items:center;display:flex;flex-flow:row nowrap;position:relative}.x-sliding-panel__button[data-v-9402d5ce]{opacity:0;pointer-events:none;position:absolute;transition:all .2s ease-out;z-index:2}.x-sliding-panel-button-left[data-v-9402d5ce]{left:var(--x-sliding-panel-buttons-distance,0)}.x-sliding-panel-button-right[data-v-9402d5ce]{right:var(--x-sliding-panel-buttons-distance,0)}.x-sliding-panel__scroll[data-v-9402d5ce]{-ms-overflow-style:none;display:flex;flex:100%;flex-flow:row nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.x-sliding-panel__scroll[data-v-9402d5ce]::-webkit-scrollbar{display:none}.x-sliding-panel__scroll[data-v-9402d5ce]>*{flex:0 0 auto}.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right[data-v-9402d5ce],.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left[data-v-9402d5ce]{opacity:1;pointer-events:all}";
 injectCss(css);
 export { css, css as default };