srcdev-nuxt-components 9.3.6 → 9.3.8

package/app/pages/ui/block-decorators.vue

@@ -1,142 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <h2 class="page-heading-2">Block Decorators</h2>
-        </PageRow>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <h3 class="page-heading-3">Configuration options</h3>
-          <p class="page-body-normal">
-            Use the select drop down to adjust the shadow, inner shadow, and border strength.
-          </p>
-          <p class="page-body-normal">
-            NOTE: These are visual decorators only and can be confugured in the UiBlockDecorated component decorator
-            stylesheet.
-          </p>
-          <div class="select-controls">
-            <div class="select-group">
-              <label for="shadow-strength">Shadow Strength</label>
-              <select id="shadow-strength" v-model="shadowStrength">
-                <option value="0">No shadow</option>
-                <option value="1">Shadow 1</option>
-                <option value="2">Shadow 2</option>
-                <option value="3">Shadow 3</option>
-                <option value="4">Shadow 4</option>
-                <option value="5">Shadow 5</option>
-                <option value="6">Shadow 6</option>
-              </select>
-            </div>
-            <div class="select-group">
-              <label for="inner-shadow-strength">Inner Shadow Strength</label>
-              <select id="inner-shadow-strength" v-model="innerShadowStrength">
-                <option value="0">No inner shadow</option>
-                <option value="1">Inner Shadow 1</option>
-                <option value="2">Inner Shadow 2</option>
-                <option value="3">Inner Shadow 3</option>
-                <option value="4">Inner Shadow 4</option>
-              </select>
-            </div>
-            <div class="select-group">
-              <label for="border-strength">Border Strength</label>
-              <select id="border-strength" v-model="borderStrength">
-                <option value="0">No border</option>
-                <option value="1">Border 1</option>
-                <option value="2">Border 2</option>
-                <option value="3">Border 3</option>
-                <option value="4">Border 4</option>
-                <option value="5">Border 5</option>
-                <option value="6">Border 6</option>
-              </select>
-            </div>
-          </div>
-        </PageRow>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <UiBlockDecorated
-            tag="div"
-            :shadow-strength
-            :inner-shadow-strength
-            :border-strength
-            :style-class-passthrough="['demo-element']"
-          >
-            <p class="page-body-normal">1</p>
-          </UiBlockDecorated>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Block Decorators",
-  meta: [
-    {
-      name: "description",
-      content: "Block Decorators Meta description content",
-    },
-  ],
-  bodyAttrs: {
-    class: "block-decorators-page",
-  },
-});
-
-const shadowStrength = ref(3);
-const innerShadowStrength = ref(4);
-const borderStrength = ref(0);
-</script>
-
-<style lang="css">
-.block-decorators-page {
-  /* CSS styles */
-
-  .select-controls {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2.5rem;
-    margin-block: 1.5rem;
-  }
-
-  .select-group {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-  }
-
-  .select-group label {
-    font-weight: 500;
-    font-size: var(--step-4);
-    color: inherit;
-  }
-
-  .select-group select {
-    padding: 0.5rem 0.75rem;
-    border: 1px solid #e5e7eb;
-    border-radius: 0.375rem;
-    /* background-color: white; */
-    font-size: var(--step-4);
-    min-width: 200px;
-  }
-
-  .select-group select:focus {
-    outline: none;
-    border-color: #3b82f6;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-  }
-
-  .demo-element {
-    aspect-ratio: 1 / 1;
-    width: 20rem;
-    display: grid;
-    place-content: center;
-
-    /* box-shadow: var(--shadow-6); */
-
-    /* background-color: light-dark(#2526271a, #d2d9e0d1); */
-  }
-}
-</style>

package/app/pages/ui/card-core.vue

@@ -1,82 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1">CardCore Component</h1>
-          <form class="mb-12">
-            <div>
-              <label for="variant" class="form-label mie-12">Variant:</label>
-              <select id="variant" v-model="cardCoreVariant" class="form-select">
-                <option value="solid">Solid</option>
-                <option value="subtle">Subtle</option>
-                <option value="soft">Soft</option>
-                <option value="outline">Outline</option>
-              </select>
-            </div>
-            <div>
-              <label for="hasDividers" class="form-label mie-12">Has Dividers:</label>
-              <input type="checkbox" id="hasDividers" v-model="hasDividers" class="form-checkbox" />
-            </div>
-            <div>
-              <label for="noOutline" class="form-label mie-12">No Outline:</label>
-              <input type="checkbox" id="noOutline" v-model="noOutline" class="form-checkbox" />
-            </div>
-          </form>
-        </PageRow>
-
-        <PageRow tag="div" variant="inset-content" :style-class-passthrough="['mbe-20']">
-          <CardCore :variant="cardCoreVariant" :has-dividers="hasDividers" :no-outline="noOutline">
-            <template #header>
-              <h2 class="page-heading-2">CardCore Header</h2>
-            </template>
-            <template #content>
-              <h3 class="page-heading-3">CardCore Content</h3>
-              <p class="page-body-normal">This is default slot content for the CardCore component.</p>
-              <p class="page-body-normal">As it's a slot, any html content can be placed here.</p>
-            </template>
-            <template #footer>
-              <p class="page-body-small">CardCore Footer</p>
-            </template>
-          </CardCore>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "CardCore Component",
-  meta: [
-    {
-      name: "description",
-      content: "CardCore Component description content",
-    },
-  ],
-  bodyAttrs: {
-    class: "card-core-page",
-  },
-});
-
-const cardCoreVariant = ref("solid");
-const hasDividers = ref(false);
-const noOutline = ref(false);
-</script>
-
-<style lang="css">
-.card-core-page {
-  form {
-    display: flex;
-    gap: 2rem;
-    flex-wrap: wrap;
-    margin-bottom: 2rem;
-  }
-  .card-core {
-  }
-}
-</style>

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

@@ -1,292 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-2">Carousel (Basic)</h1>
-        </PageRow>
-
-        <PageRow 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>
-        </PageRow>
-      </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>