srcdev-nuxt-components 9.1.37 → 9.1.39

package/app/pages/ui/carousel-flip.vue

@@ -6,24 +6,127 @@
           <h1 class="page-heading-2">Carousel</h1>
         </LayoutRow>
 
-        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <CarouselFlip
-            v-if="carouselStatus === 'success'"
-            :carousel-data-ids
-            :allow-carousel-overflow="true"
-            :transition-speed="1000"
-            :use-flip-animation="true"
-            :use-spring-effect="false"
-            :style-class-passthrough="['carousel-flip-demo', 'mbe-20']"
-          >
-            <template v-for="(item, index) in carouselData?.items" :key="index" #[item.id]>
-              <div class="custom-carousel-item">
-                <h3>{{ index + 1 }}</h3>
-                <p>{{ item.alt }}</p>
+        <!-- ── QA Panel (dev only) ───────────────────────────────── -->
+        <div v-if="isDev" class="qa-panel">
+          <details class="qa-panel__details">
+            <summary class="qa-panel__summary">
+              <span class="qa-panel__title">QA — CarouselFlip</span>
+              <code class="qa-panel__status">
+                overflow:{{ qaAllowOverflow ? "on" : "off" }} · speed:{{ qaTransitionSpeed }}ms · flip:{{
+                  qaUseFlipAnimation ? "on" : "off"
+                }}
+                · spring:{{ qaUseSpringEffect ? "on" : "off" }} · {{ qaButtonLayout }} · controls:{{
+                  qaShowControls ? "on" : "off"
+                }}
+              </code>
+            </summary>
+            <div class="qa-panel__body">
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">Allow Overflow</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="opt in [true, false]"
+                    :key="String(opt)"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaAllowOverflow === opt }"
+                    @click="qaAllowOverflow = opt"
+                  >
+                    {{ opt ? "on" : "off" }}
+                  </button>
+                </div>
               </div>
-            </template>
-          </CarouselFlip>
-        </LayoutRow>
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">Transition Speed</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="preset in transitionSpeedPresets"
+                    :key="preset"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaTransitionSpeed === preset }"
+                    @click="qaTransitionSpeed = preset"
+                  >
+                    {{ preset }}ms
+                  </button>
+                </div>
+              </div>
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">Flip Animation</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="opt in [true, false]"
+                    :key="String(opt)"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaUseFlipAnimation === opt }"
+                    @click="qaUseFlipAnimation = opt"
+                  >
+                    {{ opt ? "on" : "off" }}
+                  </button>
+                </div>
+              </div>
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">Spring Effect</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="opt in [true, false]"
+                    :key="String(opt)"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaUseSpringEffect === opt }"
+                    @click="qaUseSpringEffect = opt"
+                  >
+                    {{ opt ? "on" : "off" }}
+                  </button>
+                </div>
+              </div>
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">Button Layout</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="layout in buttonLayoutPresets"
+                    :key="layout"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaButtonLayout === layout }"
+                    @click="qaButtonLayout = layout"
+                  >
+                    {{ layout }}
+                  </button>
+                </div>
+              </div>
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">Show Controls</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="opt in [true, false]"
+                    :key="String(opt)"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaShowControls === opt }"
+                    @click="qaShowControls = opt"
+                  >
+                    {{ opt ? "on" : "off" }}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </details>
+        </div>
+
+        <CarouselFlip
+          v-if="carouselStatus === 'success'"
+          :carousel-data-ids
+          :allow-carousel-overflow="qaAllowOverflow"
+          :transition-speed="qaTransitionSpeed"
+          :use-flip-animation="qaUseFlipAnimation"
+          :use-spring-effect="qaUseSpringEffect"
+          :button-layout="qaButtonLayout"
+          :show-controls="qaShowControls"
+          :style-class-passthrough="['carousel-flip-demo', 'mbe-20']"
+        >
+          <template v-for="(item, index) in carouselData?.items" :key="index" #[item.id]>
+            <div class="custom-carousel-item">
+              <h3>{{ index + 1 }}</h3>
+              <p>{{ item.alt }}</p>
+            </div>
+          </template>
+        </CarouselFlip>
       </template>
     </NuxtLayout>
   </div>
@@ -32,6 +135,17 @@
 <script setup lang="ts">
 import type { ICarouselBasic } from "~/types/components";
 
+// ── QA controls (dev only) ────────────────────────────────────────
+const isDev = import.meta.dev;
+const qaAllowOverflow = ref(true);
+const qaTransitionSpeed = ref(1000);
+const qaUseFlipAnimation = ref(true);
+const qaUseSpringEffect = ref(false);
+const qaButtonLayout = ref<"sides" | "controls-flanking" | "controls-grouped-right" | "overlay">("sides");
+const qaShowControls = ref(true);
+const transitionSpeedPresets = [100, 200, 400, 600, 1000, 2000];
+const buttonLayoutPresets = ["sides", "controls-flanking", "controls-grouped-right", "overlay"] as const;
+
 definePageMeta({
   layout: false,
 });
@@ -54,6 +168,97 @@ const carouselDataIds = computed(() => {
 </script>
 
 <style lang="css">
+.carousel-flip-page {
+  /* ── QA Panel ──────────────────────────────────────────────────── */
+
+  .qa-panel {
+    background: oklch(15% 0 0);
+    color: white;
+    font-size: 1.3rem;
+  }
+
+  .qa-panel__details {
+    padding: 1rem 2rem;
+  }
+
+  .qa-panel__summary {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 1.6rem;
+    list-style: none;
+    user-select: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+
+  .qa-panel__title {
+    font-weight: 600;
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  .qa-panel__status {
+    font-family: monospace;
+    font-size: 1.2rem;
+    background: oklch(0% 0 0 / 0.3);
+    padding: 0.2rem 0.8rem;
+    border-radius: 0.4rem;
+    user-select: text;
+    cursor: text;
+  }
+
+  .qa-panel__body {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2.4rem;
+    padding-block: 1.2rem 0.4rem;
+  }
+
+  .qa-panel__group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+  }
+
+  .qa-panel__label {
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    opacity: 0.55;
+  }
+
+  .qa-panel__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+  }
+
+  .qa-panel__chip {
+    font-family: monospace;
+    font-size: 1.2rem;
+    color: white;
+    background: oklch(0% 0 0 / 0.25);
+    border: 1px solid oklch(100% 0 0 / 0.18);
+    padding: 0.3rem 1rem;
+    border-radius: 0.4rem;
+    cursor: pointer;
+    transition: background 0.15s;
+
+    &:hover {
+      background: oklch(0% 0 0 / 0.4);
+    }
+
+    &.is-active {
+      background: oklch(55% 0.18 240);
+      border-color: oklch(55% 0.18 240);
+    }
+  }
+}
+
 @property --glow-deg {
   syntax: "<angle>";
   inherits: true;

package/app/pages/ui/simple-grid.vue

@@ -6,7 +6,7 @@
           <h1 class="page-heading-3">Simple Grid</h1>
           <p class="page-body-normal">Simple grid displaying dummy posts data</p>
 
-          <DisplayGridCore
+          <GridCore
             v-if="status === 'success'"
             :grid-data="postsData?.posts.slice(0, displayCount) ?? ({} as Posts)"
             :style-class-passthrough="['display-posts']"
@@ -18,7 +18,7 @@
                 <div>{{ item.body }}</div>
               </div>
             </template>
-          </DisplayGridCore>
+          </GridCore>
 
           <p v-else class="page-body-normal">&hellip;Loading</p>
         </LayoutRow>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.37",
+  "version": "9.1.39",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",

package/app/components/display-grid/DisplayGridCore.vue

@@ -1,22 +0,0 @@
-<template>
-  <div :class="[elementClasses]">
-    <slot v-for="item in gridData" :key="item.id" :name="item.id"></slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  gridData: {
-    type: Object,
-    default: () => ({}),
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-});
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-const gridData = toRef(() => props.gridData);
-</script>