srcdev-nuxt-components 8.0.3 → 9.0.0

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

@@ -0,0 +1,292 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-2">Carousel (Basic)</h1>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+          <CarouselBasic
+            v-if="carouselStatus === 'success'"
+            :carousel-data-ids
+            :allow-carousel-overflow="true"
+            :return-to-start="true"
+            :style-class-passthrough="['carousel-basic-demo', 'mbe-20']"
+          >
+            <template v-for="(item, index) in carouselData?.items" #[item.id]>
+              <div class="case-study-item">
+                <h3>{{ index }}</h3>
+                <p>{{ item.alt }}</p>
+              </div>
+            </template>
+          </CarouselBasic>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ICarouselBasic } from "~/types/components";
+
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Carousel (Basic)",
+  meta: [{ name: "description", content: "Examples of Carousel (Basic)" }],
+  bodyAttrs: {
+    class: "carousel-basic-example-page",
+  },
+});
+
+const {
+  data: carouselData,
+  execute: carouselExecute,
+  status: carouselStatus, // See v-if on CarouselBasic
+  error: carouselError,
+} = await useFetch<ICarouselBasic>("/api/carousel", {
+  immediate: true,
+});
+
+const carouselDataStatic = {
+  items: [
+    {
+      id: 1,
+      url: "/images/spotlights/v2/dining-out.webp",
+      alt: "Dining out",
+    },
+    {
+      id: 2,
+      url: "/images/spotlights/v2/beer-gardens.webp",
+      alt: "Entertaining the kids",
+    },
+    {
+      id: 3,
+      url: "/images/spotlights/v2/will-it-rain.webp",
+      alt: "Will it rain?",
+    },
+    {
+      id: 4,
+      url: "/images/spotlights/v2/nightlife.webp",
+      alt: "Nightlife",
+    },
+    {
+      id: 5,
+      url: "/images/spotlights/v2/got-toothache-2.webp",
+      alt: "Dental Services",
+    },
+    {
+      id: 6,
+      url: "/images/spotlights/v2/days-out.webp",
+      alt: "Days Out",
+    },
+  ],
+  total: 6,
+  skip: 0,
+  limit: 4,
+};
+
+const carouselDataIds = computed(() => {
+  return carouselData.value?.items.map((item) => item.id) || [];
+  // return carouselData?.items.map((item) => item.id) || [];
+});
+</script>
+
+<style lang="css">
+@property --glow-deg {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: -90deg;
+}
+
+@keyframes glow {
+  100% {
+    --glow-deg: 270deg;
+  }
+}
+
+.carousel-basic-demo {
+  &.carousel-basic {
+    /* Var used in calcs */
+    --_carousel-item-track-gap: 10px;
+
+    .timeline-container {
+      padding-block: 10px;
+      padding-inline: 10px;
+      outline: 1px solid light-dark(#00000090, #f00ff090);
+
+      .timeline-item {
+        max-inline-size: 800px;
+
+        color: light-dark(#aaa, #333);
+        padding-block: 10px;
+        border-radius: 4px;
+        outline: 1px solid light-dark(#00000090, #f00ff090);
+
+        &::before {
+          content: "";
+          position: absolute;
+          height: 2px;
+          background-color: #fff;
+          left: 70px;
+          right: 0;
+        }
+
+        .count {
+          font-size: 1.2rem;
+          border-radius: 8px;
+          color: light-dark(#fff, #000);
+          background-color: light-dark(#000, #fff);
+          padding-block: 6px;
+          padding-inline: 12px;
+        }
+      }
+    }
+
+    .item-container {
+      padding-block: 10px;
+      padding-inline: 10px;
+      outline: 1px solid light-dark(#00000090, #f00ff090);
+
+      .item {
+        max-inline-size: 800px;
+
+        background-color: light-dark(#f00, #00f);
+
+        &:nth-child(odd) {
+          background-color: light-dark(#00f, #f00);
+        }
+
+        .case-study-item {
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+
+          aspect-ratio: 4 / 3;
+          inline-size: 100%;
+
+          color: light-dark(#aaa, #333);
+          padding-block: 10px;
+          padding-inline: 10px;
+          border-radius: 4px;
+          outline: 1px solid light-dark(#00000090, #f00ff090);
+        }
+      }
+    }
+
+    .controls-container {
+      gap: 20px;
+
+      .markers-container {
+        .markers-list {
+          .markers-item {
+            line-height: 3px;
+
+            &.active {
+              background-color: light-dark(#f00, #0f0);
+            }
+
+            .btn-marker {
+              width: 22px;
+              height: 3px;
+              background-color: lightgray;
+              line-height: 3px;
+
+              &.active {
+                background-color: red;
+              }
+
+              &:focus-visible {
+                outline: 1px solid light-dark(#000, #fff);
+              }
+            }
+          }
+        }
+      }
+
+      .buttons-container {
+        display: flex;
+        align-items: center;
+        justify-content: end;
+        gap: 20px;
+
+        .btn-action {
+          --gradient-glow-dark:
+            var(--slate-07), var(--slate-05), var(--slate-08), var(--slate-06), var(--slate-07), var(--slate-08),
+            var(--slate-07);
+          --gradient-glow-light: var(--slate-04), var(--slate-06), var(--slate-00), var(--slate-06), var(--slate-04);
+
+          padding-block: 10px;
+          padding-inline: 10px;
+          border-radius: 100%;
+          /* background-color: light-dark(#000, #fff); */
+          /* color: light-dark(#fff, #000); */
+
+          border: 3px solid transparent;
+          background:
+            linear-gradient(var(--surface, canvas) 0 0) padding-box,
+            conic-gradient(from var(--glow-deg), var(--gradient-glow-dark)) border-box;
+          outline: 1px solid light-dark(var(--slate-09), var(--slate-07));
+
+          position: relative;
+          isolation: isolate;
+
+          animation: glow 10s infinite linear;
+          animation-play-state: paused;
+          transition: outline-color 0.3s ease;
+
+          &::before,
+          &::after {
+            content: "";
+            position: absolute;
+            border-radius: inherit;
+          }
+
+          &::before {
+            z-index: -1;
+            background: var(--surface, canvas);
+            inset: 0.5rem;
+            scale: 1.2 1;
+            transform-origin: right;
+            filter: blur(var(--glow-size, 0.5rem));
+          }
+
+          &::after {
+            z-index: -2;
+            inset: -1.5rem;
+            background: conic-gradient(from var(--glow-deg), var(--gradient-glow-dark));
+            filter: blur(var(--glow-size, 1rem));
+            opacity: var(--glow-intensity, 0.125);
+          }
+
+          &:hover {
+            animation-play-state: running;
+            outline-color: light-dark(var(--slate-09), var(--slate-04));
+          }
+
+          .arrows-icon {
+            width: 24px;
+            height: 24px;
+
+            /* &:hover {
+              background-color: light-dark(#0009, #fff9);
+            }
+
+            &:active,
+            &.active {
+              background-color: light-dark(#0009, #fff9);
+            }
+
+            &:focus-visible {
+              outline: 1px solid light-dark(#0f0, #f0f);
+            } */
+          }
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,244 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <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>
+              </div>
+            </template>
+          </CarouselFlip>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ICarouselBasic } from "~/types/components";
+
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Carousel (Basic)",
+  meta: [{ name: "description", content: "Examples of Carousel (Basic)" }],
+  bodyAttrs: {
+    class: "carousel-flip-page",
+  },
+});
+
+const { data: carouselData, status: carouselStatus } = await useFetch<ICarouselBasic>("/api/carousel", {
+  immediate: true,
+});
+
+const carouselDataIds = computed(() => {
+  return carouselData.value?.items.map((item) => item.id) || [];
+});
+</script>
+
+<style lang="css">
+@property --glow-deg {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: -90deg;
+}
+
+@keyframes glow {
+  100% {
+    --glow-deg: 270deg;
+  }
+}
+
+.carousel-flip-demo {
+  &.carousel-flip {
+    /* Var used in calcs */
+    --_carousel-item-track-gap: 12px;
+    --_carousel-container-max-inline-size: 800px;
+    --_carousel-item-edge-preview-width: 12px; /* Must be at 2x var(--_carousel-item-track-gap)  */
+
+    @media (width >= 768px) {
+      --_carousel-item-track-gap: 24px;
+      --_carousel-item-edge-preview-width: 80px; /* Must be at 2x var(--_carousel-item-track-gap)  */
+    }
+
+    .item-container {
+      max-inline-size: 800px;
+      margin-inline: auto;
+
+      outline: 1px solid light-dark(var(--slate-08), var(--slate-01));
+      padding-block: 6px;
+      padding-inline: 6px;
+
+      @media (width >= 768px) {
+        padding-block: 12px;
+        padding-inline: 12px;
+      }
+
+      .item {
+        background-color: light-dark(var(--slate-05), var(--slate-06));
+        contain: layout style paint;
+
+        &:nth-child(odd) {
+          background-color: light-dark(var(--slate-06), var(--slate-05));
+        }
+
+        .custom-carousel-item {
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+
+          aspect-ratio: 4 / 3;
+          inline-size: 100%;
+
+          color: light-dark(#aaa, #333);
+          padding-block: 10px;
+          padding-inline: 10px;
+          border-radius: 4px;
+          outline: 1px solid light-dark(#00000090, #f00ff090);
+        }
+      }
+    }
+
+    .controls-container {
+      gap: 20px;
+      max-inline-size: 800px;
+
+      .markers-container {
+        --marker-height: 12px;
+        --marker-width: 12px;
+        --marker-border-radius: 100vw;
+
+        @media (width >= 768px) {
+          --marker-height: 22px;
+          --marker-width: 22px;
+        }
+
+        .markers-list {
+          .markers-item {
+            width: var(--marker-width);
+            height: var(--marker-height);
+            border-radius: var(--marker-border-radius);
+            line-height: var(--marker-height);
+
+            .btn-marker {
+              width: var(--marker-width);
+              height: var(--marker-height);
+              border-radius: var(--marker-border-radius);
+              background-color: light-dark(var(--slate-05), var(--slate-07));
+              line-height: 3px;
+              transition: all 0.3s linear;
+              border: 1px solid transparent;
+              outline: 1px solid transparent;
+
+              &.active {
+                background-color: light-dark(var(--slate-10), var(--slate-00));
+                will-change: background-color;
+              }
+
+              &:hover,
+              &:focus-visible {
+                outline-color: light-dark(#000, #fff);
+                will-change: background-color, outline-color;
+              }
+            }
+          }
+        }
+      }
+
+      .buttons-container {
+        display: flex;
+        align-items: center;
+        justify-content: end;
+        gap: 20px;
+
+        .btn-action {
+          --gradient-glow-dark:
+            var(--slate-07), var(--slate-05), var(--slate-08), var(--slate-06), var(--slate-07), var(--slate-08),
+            var(--slate-07);
+          --gradient-glow-light: var(--slate-04), var(--slate-06), var(--slate-00), var(--slate-06), var(--slate-04);
+
+          padding-block: 6px;
+          padding-inline: 6px;
+          border-radius: 100%;
+
+          border: 3px solid transparent;
+          background:
+            linear-gradient(var(--surface, canvas) 0 0) padding-box,
+            conic-gradient(from var(--glow-deg), var(--gradient-glow-dark)) border-box;
+          outline: 1px solid light-dark(var(--slate-09), var(--slate-07));
+
+          position: relative;
+          isolation: isolate;
+
+          animation: glow 10s infinite linear;
+          animation-play-state: paused;
+          transition: outline-color 0.3s ease;
+
+          @media (width >= 768px) {
+            padding-block: 10px;
+            padding-inline: 10px;
+          }
+
+          &::before,
+          &::after {
+            content: "";
+            position: absolute;
+            border-radius: inherit;
+          }
+
+          &::before {
+            z-index: -1;
+            background: var(--surface, canvas);
+            inset: 0.5rem;
+            scale: 1.2 1;
+            transform-origin: right;
+            filter: blur(var(--glow-size, 0.5rem));
+          }
+
+          &::after {
+            z-index: -2;
+            inset: -1.5rem;
+            background: conic-gradient(from var(--glow-deg), var(--gradient-glow-dark));
+            filter: blur(var(--glow-size, 1rem));
+            opacity: var(--glow-intensity, 0.125);
+          }
+
+          &:hover,
+          &:focus-visible {
+            animation-play-state: running;
+            outline-color: light-dark(var(--slate-09), var(--slate-04));
+            will-change: transform, opacity, filter;
+          }
+
+          .arrows-icon {
+            width: 16px;
+            height: 16px;
+
+            @media (width >= 768px) {
+              width: 24px;
+              height: 24px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>