@empathyco/x-components 6.0.0-alpha.219 → 6.0.0-alpha.220

package/docs/API-reference/components/common/filters/labels/x-components.base-rating-filter-label.md

@@ -36,14 +36,14 @@ filter label must be a valid number string. For example: '3', '2.5', '0.25'
 </template>
 
 <script setup>
-import BaseRatingFilterLabel from '@empathyco/x-components/js/components/filters/labels/base-rating-filter-label.vue'
-import { ref } from 'vue'
+import BaseRatingFilterLabel from "@empathyco/x-components/js/components/filters/labels/base-rating-filter-label.vue";
+import { ref } from "vue";
 const filter = ref({
-  label: '3',
+  label: "3",
   selected: false,
-  id: 'rating-3',
-  modelName: 'BooleanFilter',
-})
+  id: "rating-3",
+  modelName: "BooleanFilter",
+});
 </script>
 ```
 
@@ -58,14 +58,14 @@ styles, you can style the inner svg icons.
 </template>
 
 <script setup>
-import BaseRatingFilterLabel from '@empathyco/x-components/js/components/filters/labels/base-rating-filter-label.vue'
-import { ref } from 'vue'
+import BaseRatingFilterLabel from "@empathyco/x-components/js/components/filters/labels/base-rating-filter-label.vue";
+import { ref } from "vue";
 const filter = ref({
-  label: '4.5',
+  label: "4.5",
   selected: false,
-  id: 'rating-4.5',
-  modelName: 'BooleanFilter',
-})
+  id: "rating-4.5",
+  modelName: "BooleanFilter",
+});
 </script>
 ```
 
@@ -79,15 +79,15 @@ The `max` prop can be used to set the max rating number. It will render as many
 </template>
 
 <script setup>
-import BaseRatingFilterLabel from '@empathyco/x-components/js/components/filters/labels/base-rating-filter-label.vue'
-import { ref } from 'vue'
+import BaseRatingFilterLabel from "@empathyco/x-components/js/components/filters/labels/base-rating-filter-label.vue";
+import { ref } from "vue";
 const filter = ref({
-  label: '2.5',
+  label: "2.5",
   selected: false,
-  id: 'rating-2.5',
-  modelName: 'BooleanFilter',
-})
-const max = 7
+  id: "rating-2.5",
+  modelName: "BooleanFilter",
+});
+const max = 7;
 </script>
 ```
 
@@ -103,14 +103,14 @@ represent the filled and empty icons in the rating component.
 </template>
 
 <script setup>
-import BaseRatingFilterLabel from '@empathyco/x-components/js/components/filters/labels/base-rating-filter-label.vue'
-import { ref } from 'vue'
+import BaseRatingFilterLabel from "@empathyco/x-components/js/components/filters/labels/base-rating-filter-label.vue";
+import { ref } from "vue";
 const filter = ref({
-  label: '5',
+  label: "5",
   selected: false,
-  id: 'rating-5',
-  modelName: 'BooleanFilter',
-})
-const max = 5
+  id: "rating-5",
+  modelName: "BooleanFilter",
+});
+const max = 5;
 </script>
 ```

package/docs/API-reference/components/common/layouts/x-components.fixed-header-and-asides-layout.md

@@ -94,6 +94,6 @@ The component exposes the following `Design Tokens` for configuration:
 </template>
 
 <script setup>
-import FixedHeaderAndAsidesLayout from '@empathyco/x-components/js/components/layouts/fixed-header-and-asides-layout.vue'
+import FixedHeaderAndAsidesLayout from "@empathyco/x-components/js/components/layouts/fixed-header-and-asides-layout.vue";
 </script>
 ```

package/docs/API-reference/components/common/layouts/x-components.multi-column-max-width-layout.md

@@ -180,6 +180,6 @@ The component exposes the following `Design Tokens` for configuration:
 </template>
 
 <script setup>
-import MultiColumnMaxWidthLayout from '@empathyco/x-components/js/components/layouts/multi-column-max-width-layout.vue'
+import MultiColumnMaxWidthLayout from "@empathyco/x-components/js/components/layouts/multi-column-max-width-layout.vue";
 </script>
 ```

package/docs/API-reference/components/common/layouts/x-components.single-column-layout.md

@@ -76,6 +76,6 @@ The component exposes the following `Design Tokens` for configuration:
 </template>
 
 <script setup>
-import SingleColumnLayout from '@empathyco/x-components/js/components/layouts/single-column-layout.vue'
+import SingleColumnLayout from "@empathyco/x-components/js/components/layouts/single-column-layout.vue";
 </script>
 ```

package/docs/API-reference/components/common/modals/x-components.base-events-modal-close.md

@@ -45,7 +45,7 @@ the button should render, which can be anything: text, image, icon, or a combina
 </template>
 
 <script setup>
-import { BaseEventsModalClose } from '@empathyco/x-components'
+import { BaseEventsModalClose } from "@empathyco/x-components";
 </script>
 ```
 
@@ -55,10 +55,12 @@ By default, it uses the same `closingEvent` that the `BaseEventsModal` is listen
 
 ```vue
 <template>
-  <BaseEventsModalClose closingEvent="UserClosedEmpathize">×</BaseEventsModalClose>
+  <BaseEventsModalClose closingEvent="UserClosedEmpathize"
+    >×</BaseEventsModalClose
+  >
 </template>
 
 <script setup>
-import { BaseEventsModalClose } from '@empathyco/x-components'
+import { BaseEventsModalClose } from "@empathyco/x-components";
 </script>
 ```

package/docs/API-reference/components/common/modals/x-components.base-events-modal-open.md

@@ -46,7 +46,7 @@ the button should render, which can be anything: text, image, icon, or a combina
 </template>
 
 <script setup>
-import { BaseEventsModalOpen } from '@empathyco/x-components'
+import { BaseEventsModalOpen } from "@empathyco/x-components";
 </script>
 ```
 
@@ -63,6 +63,6 @@ This event can be changed using the `openingEvent` prop, but remember to change
 </template>
 
 <script setup>
-import { BaseEventsModalOpen } from '@empathyco/x-components'
+import { BaseEventsModalOpen } from "@empathyco/x-components";
 </script>
 ```

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

@@ -62,7 +62,11 @@ emit the same events that the `BaseEventsModal` component is listening to:
 </template>
 
 <script setup>
-import { BaseEventsModalOpen, BaseEventsModal, BaseEventsModalClose } from '@empathyco/x-components'
+import {
+  BaseEventsModalOpen,
+  BaseEventsModal,
+  BaseEventsModalClose,
+} from "@empathyco/x-components";
 </script>
 ```
 
@@ -75,16 +79,22 @@ see a full example on how this would work with custom events.
 ```vue
 <template>
   <div>
-    <BaseEventsModalOpen openingEvent="UserClickedOpenMyCustomModal">Open</BaseEventsModalOpen>
+    <BaseEventsModalOpen openingEvent="UserClickedOpenMyCustomModal"
+      >Open</BaseEventsModalOpen
+    >
     <BaseEventsModal
       :eventsToCloseModal="eventsToCloseModal"
       :eventsToOpenModal="eventsToOpenModal"
     >
-      <BaseEventsModalClose closingEvent="UserClickedCloseMyCustomModalFromHeader">
+      <BaseEventsModalClose
+        closingEvent="UserClickedCloseMyCustomModalFromHeader"
+      >
         Close from header
       </BaseEventsModalClose>
       <img src="success.png" />
-      <BaseEventsModalClose closingEvent="UserClickedCloseMyCustomModalFromFooter">
+      <BaseEventsModalClose
+        closingEvent="UserClickedCloseMyCustomModalFromFooter"
+      >
         Close from footer
       </BaseEventsModalClose>
     </BaseEventsModal>
@@ -92,12 +102,16 @@ see a full example on how this would work with custom events.
 </template>
 
 <script setup>
-import { BaseEventsModalOpen, BaseEventsModal, BaseEventsModalClose } from '@empathyco/x-components'
-const eventsToOpenModal = ['UserClickedOpenMyCustomModal']
+import {
+  BaseEventsModalOpen,
+  BaseEventsModal,
+  BaseEventsModalClose,
+} from "@empathyco/x-components";
+const eventsToOpenModal = ["UserClickedOpenMyCustomModal"];
 const eventsToCloseModal = [
-  'UserClickedCloseMyCustomModalFromHeader',
-  'UserClickedCloseMyCustomModalFromFooter',
-]
+  "UserClickedCloseMyCustomModalFromHeader",
+  "UserClickedCloseMyCustomModalFromFooter",
+];
 </script>
 ```
 
@@ -117,6 +131,10 @@ The `contentClass` prop can be used to add classes to the modal content.
 </template>
 
 <script setup>
-import { BaseEventsModalOpen, BaseEventsModal, BaseEventsModalClose } from '@empathyco/x-components'
+import {
+  BaseEventsModalOpen,
+  BaseEventsModal,
+  BaseEventsModalClose,
+} from "@empathyco/x-components";
 </script>
 ```

package/docs/API-reference/components/common/modals/x-components.base-id-modal-close.md

@@ -50,7 +50,7 @@ modal with modalId `my-modal`.
 </template>
 
 <script setup>
-import { BaseIdModalClose } from '@empathyco/x-components'
+import { BaseIdModalClose } from "@empathyco/x-components";
 </script>
 ```
 
@@ -72,6 +72,6 @@ function to close the modal with modalId `my-modal`.
 </template>
 
 <script setup>
-import { BaseIdModalClose } from '@empathyco/x-components'
+import { BaseIdModalClose } from "@empathyco/x-components";
 </script>
 ```

package/docs/API-reference/components/common/modals/x-components.base-id-modal-open.md

@@ -50,7 +50,7 @@ with modalId `my-modal`.
 </template>
 
 <script setup>
-import { BaseIdModalOpen } from '@empathyco/x-components'
+import { BaseIdModalOpen } from "@empathyco/x-components";
 </script>
 ```
 
@@ -72,6 +72,6 @@ function to open the modal with modalId `my-modal`.
 </template>
 
 <script setup>
-import { BaseIdModalOpen } from '@empathyco/x-components'
+import { BaseIdModalOpen } from "@empathyco/x-components";
 </script>
 ```

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

@@ -55,7 +55,11 @@ share the same value in their `modalId` prop to work:
 </template>
 
 <script setup>
-import { BaseIdModalOpen, BaseIdModal, BaseIdModalClose } from '@empathyco/x-components'
+import {
+  BaseIdModalOpen,
+  BaseIdModal,
+  BaseIdModalClose,
+} from "@empathyco/x-components";
 </script>
 ```
 
@@ -77,6 +81,10 @@ The `contentClass` prop can be used to add classes to the modal content.
 </template>
 
 <script setup>
-import { BaseIdModalOpen, BaseIdModal, BaseIdModalClose } from '@empathyco/x-components'
+import {
+  BaseIdModalOpen,
+  BaseIdModal,
+  BaseIdModalClose,
+} from "@empathyco/x-components";
 </script>
 ```

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

@@ -62,10 +62,10 @@ is open.
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { BaseModal, FadeAndSlide } from '@empathyco/x-components'
-const open = ref(false)
-const fadeAndSlide = FadeAndSlide
+import { ref } from "vue";
+import { BaseModal, FadeAndSlide } from "@empathyco/x-components";
+const open = ref(false);
+const fadeAndSlide = FadeAndSlide;
 </script>
 ```
 
@@ -94,10 +94,10 @@ The `contentClass` prop can be used to add classes to the modal content.
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { BaseModal, FadeAndSlide } from '@empathyco/x-components'
-const open = ref(false)
-const fadeAndSlide = FadeAndSlide
+import { ref } from "vue";
+import { BaseModal, FadeAndSlide } from "@empathyco/x-components";
+const open = ref(false);
+const fadeAndSlide = FadeAndSlide;
 </script>
 ```
 
@@ -124,10 +124,10 @@ The `overlayClass` prop can be used to add classes to the modal overlay.
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { BaseModal, FadeAndSlide } from '@empathyco/x-components'
-const open = ref(false)
-const fadeAndSlide = FadeAndSlide
+import { ref } from "vue";
+import { BaseModal, FadeAndSlide } from "@empathyco/x-components";
+const open = ref(false);
+const fadeAndSlide = FadeAndSlide;
 </script>
 ```
 

package/docs/API-reference/components/common/modals/x-components.close-main-modal.md

@@ -33,6 +33,10 @@ A basic example of how the close main modal button works:
 </template>
 
 <script setup>
-import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components'
+import {
+  MainModal,
+  CloseMainModal,
+  OpenMainModal,
+} from "@empathyco/x-components";
 </script>
 ```

package/docs/API-reference/components/common/modals/x-components.main-modal.md

@@ -43,7 +43,11 @@ A basic example of how the main modal works:
 </template>
 
 <script setup>
-import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components'
+import {
+  MainModal,
+  CloseMainModal,
+  OpenMainModal,
+} from "@empathyco/x-components";
 </script>
 ```
 
@@ -60,7 +64,11 @@ The `contentClass` prop can be used to add classes to the modal content.
 </template>
 
 <script setup>
-import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components'
+import {
+  MainModal,
+  CloseMainModal,
+  OpenMainModal,
+} from "@empathyco/x-components";
 </script>
 ```
 
@@ -78,7 +86,11 @@ that the modal would emit when the user clicks out of the modal.
 <template>
   <OpenMainModal>Open X</OpenMainModal>
   <MainModal
-    :openEvents="['UserClickedOpenX', 'UserOpenXProgrammatically', 'MyCustomXEvent']"
+    :openEvents="[
+      'UserClickedOpenX',
+      'UserOpenXProgrammatically',
+      'MyCustomXEvent',
+    ]"
     :outOfModalClickEvent="null"
   >
     <CloseMainModal>Close X</CloseMainModal>
@@ -86,6 +98,10 @@ that the modal would emit when the user clicks out of the modal.
 </template>
 
 <script setup>
-import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components'
+import {
+  MainModal,
+  CloseMainModal,
+  OpenMainModal,
+} from "@empathyco/x-components";
 </script>
 ```

package/docs/API-reference/components/common/modals/x-components.open-main-modal.md

@@ -33,6 +33,10 @@ A basic example of how the open main modal button works:
 </template>
 
 <script setup>
-import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components'
+import {
+  MainModal,
+  CloseMainModal,
+  OpenMainModal,
+} from "@empathyco/x-components";
 </script>
 ```

package/docs/API-reference/components/common/panels/x-components.base-header-toggle-panel.md

@@ -42,7 +42,7 @@ Toggle panel which uses the base toggle panel, adds a header and manages the ope
 <template>
   <BaseHeaderTogglePanel :animation="animation" :start-collapsed="false">
     <template #header-content="{ open }">
-      <p>Header, open: {{ open ? 'close' : 'open' }}</p>
+      <p>Header, open: {{ open ? "close" : "open" }}</p>
     </template>
     <template #default>
       <p>Default content</p>
@@ -51,9 +51,9 @@ Toggle panel which uses the base toggle panel, adds a header and manages the ope
 </template>
 
 <script setup>
-import { BaseHeaderTogglePanel } from '@empathyco/x-components'
-import { CollapseHeight } from '@empathyco/x-components/animations'
-const animation = CollapseHeight
+import { BaseHeaderTogglePanel } from "@empathyco/x-components";
+import { CollapseHeight } from "@empathyco/x-components/animations";
+const animation = CollapseHeight;
 </script>
 ```
 
@@ -63,7 +63,7 @@ const animation = CollapseHeight
 <template>
   <BaseHeaderTogglePanel :animation="animation" :start-collapsed="true">
     <template #header="{ toggleOpen, open }">
-      <p>Header, open: {{ open ? 'close' : 'open' }}</p>
+      <p>Header, open: {{ open ? "close" : "open" }}</p>
       <button @click="toggleOpen">Toggle</button>
     </template>
     <template #default>
@@ -73,9 +73,9 @@ const animation = CollapseHeight
 </template>
 
 <script setup>
-import { BaseHeaderTogglePanel } from '@empathyco/x-components'
-import { CollapseHeight } from '@empathyco/x-components/animations'
-const animation = CollapseHeight
+import { BaseHeaderTogglePanel } from "@empathyco/x-components";
+import { CollapseHeight } from "@empathyco/x-components/animations";
+const animation = CollapseHeight;
 </script>
 ```
 
@@ -85,9 +85,13 @@ The `headerClass` prop can be used to add classes to the header of the toggle pa
 
 ```vue
 <template>
-  <BaseHeaderTogglePanel headerClass="custom-class" :animation="animation" :start-collapsed="false">
+  <BaseHeaderTogglePanel
+    headerClass="custom-class"
+    :animation="animation"
+    :start-collapsed="false"
+  >
     <template #header-content="{ open }">
-      <p>Header, open: {{ open ? 'close' : 'open' }}</p>
+      <p>Header, open: {{ open ? "close" : "open" }}</p>
     </template>
     <template #default>
       <p>Default content</p>
@@ -96,8 +100,8 @@ The `headerClass` prop can be used to add classes to the header of the toggle pa
 </template>
 
 <script setup>
-import { BaseHeaderTogglePanel } from '@empathyco/x-components'
-import { CollapseHeight } from '@empathyco/x-components/animations'
-const animation = CollapseHeight
+import { BaseHeaderTogglePanel } from "@empathyco/x-components";
+import { CollapseHeight } from "@empathyco/x-components/animations";
+const animation = CollapseHeight;
 </script>
 ```

package/docs/API-reference/components/common/panels/x-components.base-id-toggle-panel-button.md

@@ -52,15 +52,22 @@ The component renders content passed to the default slot and toggles the panel w
         <span>Open aside</span>
       </template>
     </BaseIdTogglePanelButton>
-    <BaseIdTogglePanel :startOpen="true" :animation="animation" panelId="myToggle">
+    <BaseIdTogglePanel
+      :startOpen="true"
+      :animation="animation"
+      panelId="myToggle"
+    >
       <div class="x-text1">My toggle</div>
     </BaseIdTogglePanel>
   </div>
 </template>
 
 <script setup>
-import { BaseIdTogglePanel, BaseIdTogglePanelButton } from '@empathyco/x-components'
-import { CollapseFromTop } from '@empathyco/x-components/animations'
-const animation = CollapseFromTop
+import {
+  BaseIdTogglePanel,
+  BaseIdTogglePanelButton,
+} from "@empathyco/x-components";
+import { CollapseFromTop } from "@empathyco/x-components/animations";
+const animation = CollapseFromTop;
 </script>
 ```

package/docs/API-reference/components/common/panels/x-components.base-id-toggle-panel.md

@@ -49,16 +49,23 @@ A list of events that the component will watch and emit:
       <img src="./open-button-icon.svg" alt="Toggle Aside" />
       <span>Toggle Aside</span>
     </BaseIdTogglePanelButton>
-    <BaseIdTogglePanel :startOpen="true" :animation="animation" panelId="myToggle">
+    <BaseIdTogglePanel
+      :startOpen="true"
+      :animation="animation"
+      panelId="myToggle"
+    >
       <div class="x-text1">My toggle</div>
     </BaseIdTogglePanel>
   </div>
 </template>
 
 <script setup>
-import { BaseIdTogglePanel, BaseIdTogglePanelButton } from '@empathyco/x-components'
-import { CollapseFromTop } from '@empathyco/x-components/animations'
-const animation = CollapseFromTop
+import {
+  BaseIdTogglePanel,
+  BaseIdTogglePanelButton,
+} from "@empathyco/x-components";
+import { CollapseFromTop } from "@empathyco/x-components/animations";
+const animation = CollapseFromTop;
 </script>
 ```
 
@@ -69,22 +76,22 @@ You can listen to the `TogglePanelStateChanged` event to react to panel open/clo
 ```vue
 <template>
   <div>
-    <span>Panel is {{ isPanelOpen ? 'open' : 'closed' }}</span>
+    <span>Panel is {{ isPanelOpen ? "open" : "closed" }}</span>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { use$x } from '@empathyco/x-components'
+import { ref } from "vue";
+import { use$x } from "@empathyco/x-components";
 
-const x = use$x()
-const isPanelOpen = ref(false)
-const panelId = 'myToggle'
+const x = use$x();
+const isPanelOpen = ref(false);
+const panelId = "myToggle";
 
-x.on('TogglePanelStateChanged').subscribe((isOpen, { id }) => {
+x.on("TogglePanelStateChanged").subscribe((isOpen, { id }) => {
   if (id === panelId) {
-    isPanelOpen.value = isOpen
+    isPanelOpen.value = isOpen;
   }
-})
+});
 </script>
 ```

package/docs/API-reference/components/common/panels/x-components.base-tabs-panel.md

@@ -60,7 +60,7 @@ It renders a list of tabs and, when a tab is clicked, a panel with its content w
 </template>
 
 <script setup>
-import { BaseTabsPanel } from '@empathyco/x-components'
+import { BaseTabsPanel } from "@empathyco/x-components";
 </script>
 ```
 
@@ -87,7 +87,7 @@ which tab should be opened at first.
 </template>
 
 <script setup>
-import { BaseTabsPanel } from '@empathyco/x-components'
+import { BaseTabsPanel } from "@empathyco/x-components";
 </script>
 ```
 
@@ -113,7 +113,7 @@ behavior is deactivated.
 </template>
 
 <script setup>
-import { BaseTabsPanel } from '@empathyco/x-components'
+import { BaseTabsPanel } from "@empathyco/x-components";
 </script>
 ```
 
@@ -145,7 +145,7 @@ import { BaseTabsPanel } from '@empathyco/x-components'
 </template>
 
 <script setup>
-import { BaseTabsPanel } from '@empathyco/x-components'
+import { BaseTabsPanel } from "@empathyco/x-components";
 </script>
 ```
 
@@ -156,7 +156,10 @@ import { BaseTabsPanel } from '@empathyco/x-components'
 
 ```vue
 <template>
-  <BaseTabsPanel :tabsAnimation="staggeredFadeAndSlide" :contentAnimation="staggeredFadeAndSlide">
+  <BaseTabsPanel
+    :tabsAnimation="staggeredFadeAndSlide"
+    :contentAnimation="staggeredFadeAndSlide"
+  >
     <template #summer>
       <div>Summer Top Sales</div>
     </template>
@@ -167,8 +170,8 @@ import { BaseTabsPanel } from '@empathyco/x-components'
 </template>
 
 <script setup>
-import { BaseTabsPanel, StaggeredFadeAndSlide } from '@empathyco/x-components'
-const staggeredFadeAndSlide = StaggeredFadeAndSlide
+import { BaseTabsPanel, StaggeredFadeAndSlide } from "@empathyco/x-components";
+const staggeredFadeAndSlide = StaggeredFadeAndSlide;
 </script>
 ```
 
@@ -200,7 +203,7 @@ replaced entirely through the `tab` slot.
 </template>
 
 <script setup>
-import { BaseTabsPanel, CheckIcon } from '@empathyco/x-components'
+import { BaseTabsPanel, CheckIcon } from "@empathyco/x-components";
 </script>
 ```
 
@@ -229,7 +232,7 @@ Alternatively to the previous example, instead of changing the whole tab button,
 </template>
 
 <script setup>
-import { BaseTabsPanel, CheckIcon } from '@empathyco/x-components'
+import { BaseTabsPanel, CheckIcon } from "@empathyco/x-components";
 </script>
 ```
 
@@ -252,6 +255,6 @@ The displayed tab name and a method to select a tab are exposed to the tab panel
 </template>
 
 <script setup>
-import { BaseTabsPanel } from '@empathyco/x-components'
+import { BaseTabsPanel } from "@empathyco/x-components";
 </script>
 ```