empathyco · joseacabaneros · Jul 1, 2024 · May 14, 2024 · May 14, 2024 · May 14, 2024
@@ -1,11 +1,17 @@
 <template>
+  <button @click="toggleItems">Toggle</button>
   <FadeAndSlide tag="ul">
-    <li>Element to animate</li>
-    <li>Element to animate</li>
-    <li>Element to animate</li>
+    <li v-for="item in items" :key="item">
+      {{ item }}
+    </li>
   </FadeAndSlide>
 </template>
 
 <script setup lang="ts">
+  import { ref } from 'vue';
   import FadeAndSlide from '../../../../x-components/src/components/animations/fade-and-slide.vue';
+
+  const items = ref<string[]>([]);
+  const toggleItems = () =>
+    (items.value = items.value.length ? [] : [1, 2, 3, 4, 5].map(i => `Item number ${i}`));
 </script>
@@ -1,10 +1,8 @@
 <template>
-  <div>
-    <button @click="shouldRender = !shouldRender">Toggle</button>
-    <Fade>
-      <p v-if="shouldRender">León is southern Spain</p>
-    </Fade>
-  </div>
+  <button @click="shouldRender = !shouldRender">Toggle</button>
+  <Fade>
+    <p v-if="shouldRender">León is southern Spain</p>
+  </Fade>
 </template>
 
 <script setup lang="ts">

@@ -4,7 +4,6 @@
     <BaseEventsModal
       :animation="Fade"
       :focusOnOpen="true"
-      v-bind="$attrs"
       contentClass="content"
       overlayClass="overlay"
     >
@@ -19,10 +18,9 @@
   import BaseEventsModal from '../../../../x-components/src/components/modals/base-events-modal.vue';
   import Fade from '../../../../x-components/src/components/animations/fade.vue';
   import { use$x } from '../../../../x-components/src/composables/use-$x';
-  const _$x = use$x();
 
+  const _$x = use$x();
   const openModal = () => _$x.emit('UserClickedOpenEventsModal');
-
   const closeModal = () => _$x.emit('UserClickedCloseEventsModal');
 </script>
 

@@ -5,9 +5,7 @@
       <template #header-content="{ open }">
         <p>Header, open: {{ open ? 'close' : 'open' }}</p>
       </template>
-      <template>
-        <p>Default content</p>
-      </template>
+      <p>Default content</p>
     </BaseHeaderTogglePanel>
 
     <h2>Base id toggle panel, Base id toggle panel button and Base Toggle panel</h2>
@@ -21,11 +19,9 @@
       <template #summer>
         <div>Summer Top Sales</div>
       </template>
-
       <template #fall>
         <div>Fall Top Sales</div>
       </template>
-
       <template #outlet>
         <div>Outlet Top Sales</div>
       </template>

@@ -52,11 +52,11 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
   $transition-opacity-duration: 0.2s;
   $transition-transform-duration: 0.3s;
 
-  .x-fade-and-slide::v-deep .x-fade-and-slide {
+  .x-fade-and-slide {
     &--move,
     &--enter-active,
     &--leave-active {

@@ -36,55 +36,39 @@
       BaseModal
     },
     props: {
-      /**
-       * Animation to use for opening/closing the modal.
-       */
-      animation: AnimationProp,
-
-      /**
-       * Array of {@link XEvent} to listen to open the modal.
-       */
+      /** Array of {@link XEvent} to listen to open the modal. */
       eventsToOpenModal: {
         type: Array as PropType<XEvent[]>,
         default: (): XEvent[] => ['UserClickedOpenEventsModal']
       },
-
-      /**
-       * Array of {@link XEvent} to listen to close the modal.
-       */
+      /** Array of {@link XEvent} to listen to close the modal. */
       eventsToCloseModal: {
         type: Array as PropType<XEvent[]>,
         default: (): XEvent[] => ['UserClickedCloseEventsModal', 'UserClickedOutOfEventsModal']
       },
-
-      /**
-       * Event to emit when any part of the website out of the modal has been clicked.
-       */
+      /** Event to emit when any part of the website out of the modal has been clicked. */
       bodyClickEvent: {
         type: String as PropType<XEvent>,
         default: 'UserClickedOutOfEventsModal'
-      }
+      },
+      /** Animation to use for opening/closing the modal. */
+      animation: AnimationProp
     },
     setup(props) {
       const $x = use$x();
 
-      /**
-       * Whether the modal is open or not.
-       */
+      /** Whether the modal is open or not. */
       const isOpen = ref(false);
 
       /** The element that opened the modal. */
       const openerElement = ref<HTMLElement>();
-
       const baseModalEl = ref<HTMLElement>();
 
       /**
        * Opens the modal.
        *
        * @param _payload - The payload of the event that opened the modal.
        * @param metadata - The metadata of the event that opened the modal.
-       *
-       * @internal
        */
       props.eventsToOpenModal?.forEach(event =>
         $x.on(event, true).subscribe(({ metadata }) => {
@@ -95,11 +79,7 @@
         })
       );
 
-      /**
-       * Closes the modal.
-       *
-       * @internal
-       */
+      /** Closes the modal. */
       props.eventsToCloseModal?.forEach(event =>
         $x.on(event, false).subscribe(() => {
           if (isOpen.value) {
@@ -113,7 +93,6 @@
        * event target is the button that opened the modal.
        *
        * @param event - The event that triggered the close attempt.
-       * @public
        */
       const emitBodyClickEvent = (event: MouseEvent | FocusEvent) => {
         // Prevents clicking the open button when the panel is already open to close the panel.

@@ -4,7 +4,7 @@
     :events="events"
     class="x-base-id-toggle-panel-button x-button"
     data-test="base-id-toggle-button"
-    :aria-pressed="isPanelOpen"
+    :aria-pressed="isPanelOpen.toString()"
   >
     <!-- @slot (Required) Button content with a text, an icon or both -->
     <slot :isPanelOpen="isPanelOpen" />

@@ -24,7 +24,7 @@
           :id="`base-tabs-panel-${tab}`"
           class="x-tabs-panel__list-item x-tabs-panel__button x-button"
           :class="tabIsSelected(tab) ? activeTabClass : tabClass"
-          :aria-selected="tabIsSelected(tab)"
+          :aria-selected="tabIsSelected(tab).toString()"
           data-test="base-tabs-panel-button"
           role="tab"
         >