@empathyco/x-components 6.0.0-alpha.9 → 6.0.0-alpha.90

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

@@ -6,9 +6,9 @@ title: BaseIdModalOpen
 
 # BaseIdModalOpen
 
-Component that allows to open a modal by emitting XEventsTypes.UserClickedOpenModal with the modalId
-as payload. It allows full customization with the 'opening-element' slot and exposes the 'openModal'
-function.
+Component that allows to open a modal by emitting XEventsTypes.UserClickedOpenModal
+with the modalId as payload. It allows full customization with the 'opening-element' slot and
+exposes the 'openModal' function.
 
 ## Props
 
@@ -50,14 +50,14 @@ with modalId `my-modal`.
 </template>
 
 <script>
-  import { BaseIdModalOpen } from '@empathyco/x-components';
-
-  export default {
-    name: 'BaseIdModalOpenTest',
-    components: {
-      BaseIdModalOpen
-    }
-  };
+import { BaseIdModalOpen } from '@empathyco/x-components'
+
+export default {
+  name: 'BaseIdModalOpenTest',
+  components: {
+    BaseIdModalOpen,
+  },
+}
 </script>
 ```
 
@@ -79,13 +79,13 @@ function to open the modal with modalId `my-modal`.
 </template>
 
 <script>
-  import { BaseIdModalOpen } from '@empathyco/x-components';
-
-  export default {
-    name: 'BaseIdModalOpenTest',
-    components: {
-      BaseIdModalOpen
-    }
-  };
+import { BaseIdModalOpen } from '@empathyco/x-components'
+
+export default {
+  name: 'BaseIdModalOpenTest',
+  components: {
+    BaseIdModalOpen,
+  },
+}
 </script>
 ```

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

@@ -8,8 +8,8 @@ title: BaseIdModal
 
 Component containing a modal expecting a required prop, named `modalId`. It reacts to
 `UserClickedOpenModal`, `UserClickedCloseModal` and `UserClickedOutOfModal` events, when their
-payload matches the component's 'modalId' prop, to handle its open/close state. The default slot
-offers the possibility to customise the modal content.
+payload matches the component's 'modalId' prop, to handle its open/close state. The default
+slot offers the possibility to customise the modal content.
 
 ## Props
 
@@ -55,16 +55,16 @@ share the same value in their `modalId` prop to work:
 </template>
 
 <script>
-  import { BaseIdModalOpen, BaseIdModal, BaseIdModalClose } from '@empathyco/x-components';
-
-  export default {
-    name: 'TestModal',
-    components: {
-      BaseIdModalOpen,
-      BaseIdModal,
-      BaseIdModalClose
-    }
-  };
+import { BaseIdModalOpen, BaseIdModal, BaseIdModalClose } from '@empathyco/x-components'
+
+export default {
+  name: 'TestModal',
+  components: {
+    BaseIdModalOpen,
+    BaseIdModal,
+    BaseIdModalClose,
+  },
+}
 </script>
 ```
 
@@ -86,15 +86,15 @@ The `contentClass` prop can be used to add classes to the modal content.
 </template>
 
 <script>
-  import { BaseIdModalOpen, BaseIdModal, BaseIdModalClose } from '@empathyco/x-components';
-
-  export default {
-    name: 'TestModal',
-    components: {
-      BaseIdModalOpen,
-      BaseIdModal,
-      BaseIdModalClose
-    }
-  };
+import { BaseIdModalOpen, BaseIdModal, BaseIdModalClose } from '@empathyco/x-components'
+
+export default {
+  name: 'TestModal',
+  components: {
+    BaseIdModalOpen,
+    BaseIdModal,
+    BaseIdModalClose,
+  },
+}
 </script>
 ```

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

@@ -6,8 +6,8 @@ title: BaseModal
 
 # BaseModal
 
-Base component with no XPlugin dependencies that serves as a utility for constructing more complex
-modals.
+Base component with no XPlugin dependencies that serves as a utility for constructing more
+complex modals.
 
 ## Props
 
@@ -62,21 +62,21 @@ is open.
 </template>
 
 <script>
-  import { BaseModal, FadeAndSlide } from '@empathyco/x-components';
-  import Vue from 'vue';
-
-  Vue.component('fadeAndSlide', FadeAndSlide);
-
-  export default {
-    components: {
-      BaseModal
-    },
-    data() {
-      return {
-        open: false
-      };
+import { BaseModal, FadeAndSlide } from '@empathyco/x-components'
+import Vue from 'vue'
+
+Vue.component('fadeAndSlide', FadeAndSlide)
+
+export default {
+  components: {
+    BaseModal,
+  },
+  data() {
+    return {
+      open: false,
     }
-  };
+  },
+}
 </script>
 ```
 
@@ -105,21 +105,21 @@ The `contentClass` prop can be used to add classes to the modal content.
 </template>
 
 <script>
-  import { BaseModal, FadeAndSlide } from '@empathyco/x-components';
-  import Vue from 'vue';
-
-  Vue.component('fadeAndSlide', FadeAndSlide);
-
-  export default {
-    components: {
-      BaseModal
-    },
-    data() {
-      return {
-        open: false
-      };
+import { BaseModal, FadeAndSlide } from '@empathyco/x-components'
+import Vue from 'vue'
+
+Vue.component('fadeAndSlide', FadeAndSlide)
+
+export default {
+  components: {
+    BaseModal,
+  },
+  data() {
+    return {
+      open: false,
     }
-  };
+  },
+}
 </script>
 ```
 
@@ -146,21 +146,21 @@ The `overlayClass` prop can be used to add classes to the modal overlay.
 </template>
 
 <script>
-  import { BaseModal, FadeAndSlide } from '@empathyco/x-components';
-  import Vue from 'vue';
-
-  Vue.component('fadeAndSlide', FadeAndSlide);
-
-  export default {
-    components: {
-      BaseModal
-    },
-    data() {
-      return {
-        open: false
-      };
+import { BaseModal, FadeAndSlide } from '@empathyco/x-components'
+import Vue from 'vue'
+
+Vue.component('fadeAndSlide', FadeAndSlide)
+
+export default {
+  components: {
+    BaseModal,
+  },
+  data() {
+    return {
+      open: false,
     }
-  };
+  },
+}
 </script>
 ```
 

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

@@ -35,15 +35,15 @@ Here you have a basic example of how the close main modal button works.
 </template>
 
 <script>
-  import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components';
-
-  export default {
-    name: 'XModalDemo',
-    components: {
-      MainModal,
-      CloseMainModal,
-      OpenMainModal
-    }
-  };
+import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components'
+
+export default {
+  name: 'XModalDemo',
+  components: {
+    MainModal,
+    CloseMainModal,
+    OpenMainModal,
+  },
+}
 </script>
 ```

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

@@ -45,16 +45,16 @@ Here you have a basic example of how the main modal works.
 </template>
 
 <script>
-  import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components';
-
-  export default {
-    name: 'MainModalDemo',
-    components: {
-      MainModal,
-      CloseMainModal,
-      OpenMainModal
-    }
-  };
+import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components'
+
+export default {
+  name: 'MainModalDemo',
+  components: {
+    MainModal,
+    CloseMainModal,
+    OpenMainModal,
+  },
+}
 </script>
 ```
 
@@ -73,16 +73,16 @@ The `contentClass` prop can be used to add classes to the modal content.
 </template>
 
 <script>
-  import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components';
-
-  export default {
-    name: 'MainModalDemo',
-    components: {
-      MainModal,
-      CloseMainModal,
-      OpenMainModal
-    }
-  };
+import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components'
+
+export default {
+  name: 'MainModalDemo',
+  components: {
+    MainModal,
+    CloseMainModal,
+    OpenMainModal,
+  },
+}
 </script>
 ```
 
@@ -112,15 +112,15 @@ that the modal would emit when the user clicks out of the modal.
 </template>
 
 <script>
-  import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components';
-
-  export default {
-    name: 'MainModalDemo',
-    components: {
-      MainModal,
-      CloseMainModal,
-      OpenMainModal
-    }
-  };
+import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components'
+
+export default {
+  name: 'MainModalDemo',
+  components: {
+    MainModal,
+    CloseMainModal,
+    OpenMainModal,
+  },
+}
 </script>
 ```

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

@@ -35,15 +35,15 @@ Here you have a basic example of how the open main modal button works.
 </template>
 
 <script>
-  import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components';
-
-  export default {
-    name: 'XModalDemo',
-    components: {
-      MainModal,
-      CloseMainModal,
-      OpenMainModal
-    }
-  };
+import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components'
+
+export default {
+  name: 'XModalDemo',
+  components: {
+    MainModal,
+    CloseMainModal,
+    OpenMainModal,
+  },
+}
 </script>
 ```

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

@@ -6,8 +6,8 @@ title: BaseHeaderTogglePanel
 
 # BaseHeaderTogglePanel
 
-Toggle panel which uses the base toggle panel, adds a header and manage the open / close state of
-the panel.
+Toggle panel which uses the base toggle panel, adds a header and manage the
+open / close state of the panel.
 
 ## Props
 

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

@@ -6,8 +6,9 @@ title: BaseIdTogglePanelButton
 
 # BaseIdTogglePanelButton
 
-Component containing an event button that emits XEventsTypes.UserClickedPanelToggleButton when
-clicked with the panelId as payload.
+Component containing an event button that emits
+XEventsTypes.UserClickedPanelToggleButton when clicked with
+the panelId as payload.
 
 It has a default slot to customize its contents.
 
@@ -58,23 +59,23 @@ The component rendering content passed to the default slot and opening the panel
 </template>
 
 <script>
-  import {
+import {
+  BaseIdTogglePanel,
+  BaseIdTogglePanelButton,
+  CollapseFromTop,
+} from '@empathyco/x-components'
+
+export default {
+  components: {
     BaseIdTogglePanel,
     BaseIdTogglePanelButton,
-    CollapseFromTop
-  } from '@empathyco/x-components';
-
-  export default {
-    components: {
-      BaseIdTogglePanel,
-      BaseIdTogglePanelButton,
-      CollapseFromTop
-    },
-    data: function () {
-      return {
-        animation: CollapseFromTop
-      };
+    CollapseFromTop,
+  },
+  data: function () {
+    return {
+      animation: CollapseFromTop,
     }
-  };
+  },
+}
 </script>
 ```

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

@@ -6,9 +6,9 @@ title: BaseIdTogglePanel
 
 # BaseIdTogglePanel
 
-Simple panel that could receives its initial open state via prop, if not the default is opens and a
-required prop, named `panelId`, which are responsible of rendering default slot inside a
-configurable transition.
+Simple panel that could receives its initial open state via prop, if not the default is opens
+and a required prop, named `panelId`, which are responsible of rendering default slot
+inside a configurable transition.
 
 It reacts to `UserClickedPanelToggleButton` event, when their payload matches the component's
 'panelId' prop, to handle its open/close state.
@@ -57,23 +57,23 @@ Using default slot:
 </template>
 
 <script>
-  import {
+import {
+  BaseIdTogglePanel,
+  BaseIdTogglePanelButton,
+  CollapseFromTop,
+} from '@empathyco/x-components'
+
+export default {
+  components: {
     BaseIdTogglePanel,
     BaseIdTogglePanelButton,
-    CollapseFromTop
-  } from '@empathyco/x-components';
-
-  export default {
-    components: {
-      BaseIdTogglePanel,
-      BaseIdTogglePanelButton,
-      CollapseFromTop
-    },
-    data: function () {
-      return {
-        animation: CollapseFromTop
-      };
+    CollapseFromTop,
+  },
+  data: function () {
+    return {
+      animation: CollapseFromTop,
     }
-  };
+  },
+}
 </script>
 ```

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

@@ -62,14 +62,14 @@ It renders a list of tabs and, when a tab is clicked, a panel with its content w
 </template>
 
 <script>
-  import { BaseTabsPanel } from '@empathyco/x-components';
-
-  export default {
-    name: 'BaseTabsPanelDemo',
-    components: {
-      BaseTabsPanel
-    }
-  };
+import { BaseTabsPanel } from '@empathyco/x-components'
+
+export default {
+  name: 'BaseTabsPanelDemo',
+  components: {
+    BaseTabsPanel,
+  },
+}
 </script>
 ```
 
@@ -98,14 +98,14 @@ which tab should be opened at first.
 </template>
 
 <script>
-  import { BaseTabsPanel } from '@empathyco/x-components';
-
-  export default {
-    name: 'BaseTabsPanelDemo',
-    components: {
-      BaseTabsPanel
-    }
-  };
+import { BaseTabsPanel } from '@empathyco/x-components'
+
+export default {
+  name: 'BaseTabsPanelDemo',
+  components: {
+    BaseTabsPanel,
+  },
+}
 </script>
 ```
 
@@ -133,14 +133,14 @@ behavior is deactivated.
 </template>
 
 <script>
-  import { BaseTabsPanel } from '@empathyco/x-components';
-
-  export default {
-    name: 'BaseTabsPanelDemo',
-    components: {
-      BaseTabsPanel
-    }
-  };
+import { BaseTabsPanel } from '@empathyco/x-components'
+
+export default {
+  name: 'BaseTabsPanelDemo',
+  components: {
+    BaseTabsPanel,
+  },
+}
 </script>
 ```
 
@@ -174,14 +174,14 @@ behavior is deactivated.
 </template>
 
 <script>
-  import { BaseTabsPanel } from '@empathyco/x-components';
-
-  export default {
-    name: 'BaseTabsPanelDemo',
-    components: {
-      BaseTabsPanel
-    }
-  };
+import { BaseTabsPanel } from '@empathyco/x-components'
+
+export default {
+  name: 'BaseTabsPanelDemo',
+  components: {
+    BaseTabsPanel,
+  },
+}
 </script>
 ```
 
@@ -204,19 +204,19 @@ behavior is deactivated.
 </template>
 
 <script>
-  import { BaseTabsPanel, StaggeredFadeAndSlide } from '@empathyco/x-components';
-
-  export default {
-    name: 'BaseTabsPanelDemo',
-    components: {
-      BaseTabsPanel
-    },
-    data() {
-      return {
-        staggeredFadeAndSlide: StaggeredFadeAndSlide
-      };
+import { BaseTabsPanel, StaggeredFadeAndSlide } from '@empathyco/x-components'
+
+export default {
+  name: 'BaseTabsPanelDemo',
+  components: {
+    BaseTabsPanel,
+  },
+  data() {
+    return {
+      staggeredFadeAndSlide: StaggeredFadeAndSlide,
     }
-  };
+  },
+}
 </script>
 ```
 
@@ -251,15 +251,15 @@ replaced entirely through the `tab` slot.
 </template>
 
 <script>
-  import { BaseTabsPanel, CheckIcon } from '@empathyco/x-components';
-
-  export default {
-    name: 'BaseTabsPanelDemo',
-    components: {
-      BaseTabsPanel,
-      CheckIcon
-    }
-  };
+import { BaseTabsPanel, CheckIcon } from '@empathyco/x-components'
+
+export default {
+  name: 'BaseTabsPanelDemo',
+  components: {
+    BaseTabsPanel,
+    CheckIcon,
+  },
+}
 </script>
 ```
 
@@ -291,15 +291,15 @@ Alternatively to the previous example, instead of changing the whole tab button,
 </template>
 
 <script>
-  import { BaseTabsPanel, CheckIcon } from '@empathyco/x-components';
-
-  export default {
-    name: 'BaseTabsPanelDemo',
-    components: {
-      BaseTabsPanel,
-      CheckIcon
-    }
-  };
+import { BaseTabsPanel, CheckIcon } from '@empathyco/x-components'
+
+export default {
+  name: 'BaseTabsPanelDemo',
+  components: {
+    BaseTabsPanel,
+    CheckIcon,
+  },
+}
 </script>
 ```
 
@@ -323,13 +323,13 @@ The displayed tab name and a method to select a tab are exposed to the tab panel
 </template>
 
 <script>
-  import { BaseTabsPanel } from '@empathyco/x-components';
-
-  export default {
-    name: 'BaseTabsPanelDemo',
-    components: {
-      BaseTabsPanel
-    }
-  };
+import { BaseTabsPanel } from '@empathyco/x-components'
+
+export default {
+  name: 'BaseTabsPanelDemo',
+  components: {
+    BaseTabsPanel,
+  },
+}
 </script>
 ```