srcdev-nuxt-components 9.1.37 → 9.1.39

package/app/components/carousels/CarouselFlip.vue

@@ -3,6 +3,7 @@
     ref="carouselWrapperRef"
     class="carousel-flip"
     :class="[elementClasses]"
+    :data-button-layout="buttonLayout"
     role="region"
     aria-label="Image carousel"
   >
@@ -10,84 +11,81 @@
       Item {{ currentActiveIndex + 1 }} of {{ itemCount }}
     </div>
 
-    <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+    <div
+      ref="carouselContainerRef"
+      tabindex="0"
+      class="item-container"
+      :class="{ 'allow-overflow': allowCarouselOverflow }"
+      role="group"
+      aria-label="Carousel items"
+    >
       <div
-        ref="carouselContainerRef"
-        tabindex="0"
-        class="item-container"
-        :class="{ 'allow-overflow': allowCarouselOverflow }"
-        role="group"
-        aria-label="Carousel items"
+        v-for="(item, index) in carouselDataIds"
+        :key="index"
+        ref="carouselItems"
+        class="item"
+        :class="{ loaded: carouselInitComplete && userHasInteracted }"
+        :data-id="item"
+        :aria-current="currentActiveIndex === index ? 'true' : 'false'"
       >
-        <div
-          v-for="(item, index) in carouselDataIds"
-          :key="index"
-          ref="carouselItems"
-          class="item"
-          :class="{ loaded: carouselInitComplete && userHasInteracted }"
-          :data-id="item"
-          :aria-current="currentActiveIndex === index ? 'true' : 'false'"
-        >
-          <slot :name="item"></slot>
-        </div>
+        <slot :name="item"></slot>
       </div>
-    </LayoutRow>
-
-    <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
-      <div ref="controlsContainerRef" tabindex="0" class="controls-container">
-        <div class="markers-container">
-          <ul class="markers-list">
-            <li v-for="index in itemCount" :key="index" class="markers-item">
-              <button
-                class="btn-marker"
-                :class="[{ active: displayActiveIndex === index - 1 }]"
-                :aria-label="`Jump to item ${index}`"
-                @click.prevent="jumpToFrame(index - 1)"
-              ></button>
-            </li>
-          </ul>
-        </div>
-        <div class="buttons-container">
-          <button type="button" class="btn-action" aria-label="Go to previous item" @click.prevent="actionPrevious()">
-            <Icon name="ic:outline-keyboard-arrow-left" class="arrows-icon" />
-          </button>
-          <button type="button" class="btn-action" aria-label="Go to next item" @click.prevent="actionNext()">
-            <Icon name="ic:outline-keyboard-arrow-right" class="arrows-icon" />
-          </button>
-        </div>
+    </div>
+
+    <div v-if="showControls" ref="controlsContainerRef" tabindex="0" class="controls-container">
+      <div class="markers-container">
+        <ul class="markers-list">
+          <li v-for="index in itemCount" :key="index" class="markers-item">
+            <button
+              class="btn-marker"
+              :class="[{ active: displayActiveIndex === index - 1 }]"
+              :aria-label="`Jump to item ${index}`"
+              @click.prevent="jumpToFrame(index - 1)"
+            ></button>
+          </li>
+        </ul>
       </div>
-    </LayoutRow>
+    </div>
+
+    <div class="buttons-container">
+      <button
+        type="button"
+        class="btn-action btn-prev"
+        aria-label="Go to previous item"
+        @click.prevent="actionPrevious()"
+      >
+        <Icon name="ic:outline-keyboard-arrow-left" class="arrows-icon" />
+      </button>
+      <button type="button" class="btn-action btn-next" aria-label="Go to next item" @click.prevent="actionNext()">
+        <Icon name="ic:outline-keyboard-arrow-right" class="arrows-icon" />
+      </button>
+    </div>
   </section>
 </template>
 
 <script setup lang="ts">
 import { useEventListener, useResizeObserver, useSwipe } from "@vueuse/core";
 
-const props = defineProps({
-  carouselDataIds: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-  transitionSpeed: {
-    type: Number,
-    default: 200,
-  },
-  allowCarouselOverflow: {
-    type: Boolean,
-    default: false,
-  },
-  useFlipAnimation: {
-    type: Boolean,
-    default: false,
-  },
-  useSpringEffect: {
-    type: Boolean,
-    default: false,
-  },
+interface Props {
+  carouselDataIds?: string[];
+  styleClassPassthrough?: string | string[];
+  transitionSpeed?: number;
+  allowCarouselOverflow?: boolean;
+  useFlipAnimation?: boolean;
+  useSpringEffect?: boolean;
+  buttonLayout?: "sides" | "controls-flanking" | "controls-grouped-right" | "overlay";
+  showControls?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  carouselDataIds: () => [],
+  styleClassPassthrough: () => [],
+  transitionSpeed: 200,
+  allowCarouselOverflow: false,
+  useFlipAnimation: false,
+  useSpringEffect: false,
+  buttonLayout: "sides",
+  showControls: true,
 });
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
@@ -417,93 +415,100 @@ onMounted(() => {
 
 <style lang="css">
 @layer components {
-.carousel-flip {
-  --_carousel-item-track-gap: 10px;
-
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 10px;
-  opacity: 0;
-
-  &.mounted {
-    opacity: 1;
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-
-  .item-container {
-    display: flex;
-    gap: var(--_carousel-item-track-gap);
-    overflow-x: hidden;
-    position: relative;
-    isolation: isolate;
-
-    max-inline-size: var(--_carousel-display-max-width);
-    margin-inline: auto;
+  .carousel-flip {
+    --_carousel-item-track-gap: 10px;
+
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: 1fr auto;
+    grid-template-areas:
+      "prev  carousel  next"
+      ".     controls  .   ";
+    gap: 10px;
+    opacity: 0;
+
+    &.mounted {
+      opacity: 1;
+    }
 
-    &.allow-overflow {
-      overflow-x: initial;
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
     }
 
-    .item {
+    .item-container {
+      grid-area: carousel;
       display: flex;
-      flex: 0 0 100%;
+      gap: var(--_carousel-item-track-gap);
+      overflow-x: hidden;
       position: relative;
+      isolation: isolate;
 
+      max-inline-size: var(--_carousel-display-max-width);
       margin-inline: auto;
 
-      max-inline-size: calc(
-        var(--_carousel-container-max-inline-size) + var(--_carousel-item-track-gap) -
-          (2 * var(--_carousel-item-edge-preview-width))
-      );
+      &.allow-overflow {
+        overflow-x: initial;
+      }
+
+      .item {
+        display: flex;
+        flex: 0 0 100%;
+        position: relative;
 
-      translate: calc(
-          v-bind(itemWidthOffsetStr) - var(--_carousel-item-track-gap) + var(--_carousel-item-edge-preview-width)
-        )
-        0;
+        margin-inline: auto;
 
-      &.loaded {
-        transition: transform v-bind(transitionSpeedStr) ease;
+        max-inline-size: calc(
+          var(--_carousel-container-max-inline-size) + var(--_carousel-item-track-gap) -
+            (2 * var(--_carousel-item-edge-preview-width))
+        );
+
+        translate: calc(
+            v-bind(itemWidthOffsetStr) - var(--_carousel-item-track-gap) + var(--_carousel-item-edge-preview-width)
+          )
+          0;
+
+        &.loaded {
+          transition: transform v-bind(transitionSpeedStr) ease;
+        }
       }
     }
-  }
 
-  .controls-container {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    max-inline-size: var(--_carousel-display-max-width);
-    margin-inline: auto;
+    .controls-container {
+      grid-area: controls;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      max-inline-size: var(--_carousel-display-max-width);
+      margin-inline: auto;
 
-    .markers-container {
-      .markers-list {
-        display: flex;
-        flex-direction: row;
-        gap: 10px;
-        list-style-type: none;
-        margin: unset;
-        padding: unset;
-
-        .markers-item {
-          .btn-marker {
-            border: 1px solid transparent;
-            outline: 1px solid transparent;
-            box-shadow: none;
-            cursor: pointer;
-            transition: background-color v-bind(transitionSpeedStr) linear;
-
-            &.active {
-              background-color: light-dark(var(--slate-10), var(--slate-00));
+      .markers-container {
+        .markers-list {
+          display: flex;
+          flex-direction: row;
+          gap: 10px;
+          list-style-type: none;
+          margin: unset;
+          padding: unset;
+
+          .markers-item {
+            .btn-marker {
+              border: 1px solid transparent;
+              outline: 1px solid transparent;
+              box-shadow: none;
+              cursor: pointer;
+              transition: background-color v-bind(transitionSpeedStr) linear;
+
+              &.active {
+                background-color: light-dark(var(--slate-10), var(--slate-00));
+              }
             }
           }
         }
@@ -511,26 +516,79 @@ onMounted(() => {
     }
 
     .buttons-container {
+      display: contents;
+    }
+
+    .btn-prev {
+      grid-area: prev;
+      align-self: center;
+      z-index: 1;
+    }
+
+    .btn-next {
+      grid-area: next;
+      align-self: center;
+      z-index: 1;
+    }
+
+    .btn-action {
       display: flex;
       align-items: center;
-      justify-content: end;
-      gap: 20px;
+      justify-content: center;
+      cursor: pointer;
+      height: fit-content;
+
+      background-color: white;
+      border: 1px solid light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
+      border-radius: 100vw;
+      padding: 8px;
+
+      .arrows-icon {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    /* ── controls-flanking: buttons flank the controls row ─────── */
+    &[data-button-layout="controls-flanking"] {
+      .btn-prev {
+        grid-area: unset;
+        grid-column: 1;
+        grid-row: 2;
+      }
+
+      .btn-next {
+        grid-area: unset;
+        grid-column: 3;
+        grid-row: 2;
+      }
+    }
+
+    /* ── controls-grouped-right: markers centred, buttons end ────── */
+    &[data-button-layout="controls-grouped-right"] {
+      grid-template-columns: 1fr;
+      grid-template-areas:
+        "carousel"
+        "controls";
 
-      .btn-action {
+      .buttons-container {
         display: flex;
         align-items: center;
-        justify-content: center;
-
-        cursor: pointer;
-        height: fit-content;
+        gap: 10px;
+        grid-area: controls;
+        justify-self: end;
+      }
+    }
 
-        .arrows-icon {
-          width: 24px;
-          height: 24px;
-        }
+    /* ── overlay: controls float at the bottom edge of the frame ── */
+    &[data-button-layout="overlay"] {
+      .controls-container {
+        grid-area: carousel;
+        align-self: end;
+        z-index: 1;
+        padding-block-end: 1rem;
       }
     }
   }
 }
-}
 </style>

package/app/components/carousels/stories/CarouselFlip.stories.ts

@@ -16,6 +16,8 @@ interface CarouselFlipStoryArgs {
   transitionSpeed: number;
   useFlipAnimation: boolean;
   useSpringEffect: boolean;
+  buttonLayout: "sides" | "controls-flanking" | "controls-grouped-right" | "overlay";
+  showControls: boolean;
   styleClassPassthrough: string[];
   // Mock data for stories
   carouselData: CarouselItem[];
@@ -105,6 +107,21 @@ export default {
         category: "Animation",
       },
     },
+    buttonLayout: {
+      control: { type: "select" },
+      options: ["sides", "controls-flanking", "controls-grouped-right", "overlay"],
+      description: "Placement of prev/next buttons relative to the carousel and controls bar",
+      table: {
+        category: "Layout",
+      },
+    },
+    showControls: {
+      control: { type: "boolean" },
+      description: "Show or hide the markers/controls bar",
+      table: {
+        category: "Layout",
+      },
+    },
     styleClassPassthrough: {
       control: { type: "object" },
       description: "Additional CSS classes to pass through",
@@ -127,6 +144,8 @@ export default {
     transitionSpeed: 1000,
     useFlipAnimation: true,
     useSpringEffect: false,
+    buttonLayout: "sides",
+    showControls: true,
     styleClassPassthrough: ["carousel-flip-demo"],
     carouselData: sampleCarouselItems,
   },
@@ -289,6 +308,8 @@ const Template: StoryFn<CarouselFlipStoryArgs> = (args) => ({
         :transition-speed="args.transitionSpeed"
         :use-flip-animation="args.useFlipAnimation"
         :use-spring-effect="args.useSpringEffect"
+        :button-layout="args.buttonLayout"
+        :show-controls="args.showControls"
         :style-class-passthrough="args.styleClassPassthrough"
       >
         <template v-for="(item, index) in filteredCarouselData" #[item.id] :key="index">
@@ -350,6 +371,16 @@ NoOverflow.args = {
   styleClassPassthrough: ["carousel-flip-demo", "no-overflow"],
 };
 
+export const NoControls = Template.bind({});
+NoControls.args = {
+  carouselDataIds: [1, 2, 3, 4, 5],
+  transitionSpeed: 1000,
+  useFlipAnimation: true,
+  useSpringEffect: false,
+  allowCarouselOverflow: true,
+  showControls: false,
+};
+
 export const ManyItems = Template.bind({});
 ManyItems.args = {
   carouselDataIds: [1, 2, 3, 4, 5, 6, 7, 8],
@@ -452,6 +483,8 @@ const RichContentTemplate: StoryFn<CarouselFlipStoryArgs> = (args) => ({
         :transition-speed="args.transitionSpeed"
         :use-flip-animation="args.useFlipAnimation"
         :use-spring-effect="args.useSpringEffect"
+        :button-layout="args.buttonLayout"
+        :show-controls="args.showControls"
         :style-class-passthrough="args.styleClassPassthrough"
       >
         <template v-for="(item, index) in filteredCarouselData" #[item.id] :key="index">
@@ -592,6 +625,8 @@ const AnimationShowcaseTemplate: StoryFn<CarouselFlipStoryArgs> = (args) => ({
         :transition-speed="args.transitionSpeed"
         :use-flip-animation="args.useFlipAnimation"
         :use-spring-effect="args.useSpringEffect"
+        :button-layout="args.buttonLayout"
+        :show-controls="args.showControls"
         :style-class-passthrough="args.styleClassPassthrough"
       >
         <template v-for="(item, index) in filteredCarouselData" #[item.id] :key="index">

package/app/components/carousels/tests/CarouselFlip.spec.ts

@@ -232,6 +232,44 @@ describe("CarouselFlip", () => {
       expect(component).toBeDefined();
       // Spring effect is applied during transitions
     });
+
+    it("shows controls container by default", async () => {
+      await createWrapper();
+
+      expect(wrapper.find(".controls-container").exists()).toBe(true);
+      expect(wrapper.findAll(".btn-marker").length).toBe(6);
+    });
+
+    it("hides controls container when showControls is false", async () => {
+      await createWrapper({ showControls: false });
+
+      expect(wrapper.find(".controls-container").exists()).toBe(false);
+      expect(wrapper.findAll(".btn-marker").length).toBe(0);
+    });
+
+    it("still renders navigation buttons when showControls is false", async () => {
+      await createWrapper({ showControls: false });
+
+      expect(wrapper.find('[aria-label="Go to previous item"]').exists()).toBe(true);
+      expect(wrapper.find('[aria-label="Go to next item"]').exists()).toBe(true);
+    });
+
+    it("navigation still works when showControls is false", async () => {
+      await createWrapper({ showControls: false });
+      await nextTick();
+
+      const nextButton = wrapper.find('[aria-label="Go to next item"]');
+      await nextButton.trigger("click");
+      await nextTick();
+
+      expect(component.currentActiveIndex).toBe(1);
+    });
+
+    it("sets data-button-layout attribute from buttonLayout prop", async () => {
+      await createWrapper({ buttonLayout: "overlay" });
+
+      expect(wrapper.attributes("data-button-layout")).toBe("overlay");
+    });
   });
 
   describe("Initial Setup", () => {