srcdev-nuxt-components 9.3.6 → 9.3.8

package/app/pages/auto-grid.vue

@@ -1,328 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-32']">
-          <h1 class="page-heading-1">AutoGrid</h1>
-          <p class="page-body-normal">
-            Responsive auto-fit CSS grid wrapper. Columns auto-fit to a minimum width; when
-            <code>is-responsive</code>
-            is enabled, the minimum shifts at container breakpoints via
-            <code>@container</code>
-            queries.
-          </p>
-        </PageRow>
-
-        <div v-if="isDev" class="qa-panel">
-          <details class="qa-panel__details">
-            <summary class="qa-panel__summary">
-              <span class="qa-panel__title">QA — AutoGrid</span>
-              <code class="qa-panel__status">
-                tag:{{ qaTag }} · responsive:{{ qaIsResponsive ? "on" : "off" }} · small:{{ qaMinColSizeSmall }} ·
-                default:{{ qaMinColSizeDefault }} · large:{{ qaMinColSizeLarge }} · gap:{{ qaGap }}
-              </code>
-            </summary>
-            <div class="qa-panel__body">
-              <div class="qa-panel__group">
-                <span class="qa-panel__label">tag</span>
-                <div class="qa-panel__chips">
-                  <button
-                    v-for="opt in tagOptions"
-                    :key="opt"
-                    class="qa-panel__chip"
-                    :class="{ 'is-active': qaTag === opt }"
-                    @click="qaTag = opt"
-                  >
-                    {{ opt }}
-                  </button>
-                </div>
-              </div>
-
-              <div class="qa-panel__group">
-                <span class="qa-panel__label">is-responsive</span>
-                <div class="qa-panel__chips">
-                  <button
-                    v-for="opt in [true, false]"
-                    :key="String(opt)"
-                    class="qa-panel__chip"
-                    :class="{ 'is-active': qaIsResponsive === opt }"
-                    @click="qaIsResponsive = opt"
-                  >
-                    {{ opt ? "on" : "off" }}
-                  </button>
-                </div>
-              </div>
-
-              <div class="qa-panel__group">
-                <span class="qa-panel__label">min-col-size-small</span>
-                <div class="qa-panel__chips">
-                  <button
-                    v-for="preset in sizePresets"
-                    :key="preset"
-                    class="qa-panel__chip"
-                    :class="{ 'is-active': qaMinColSizeSmall === preset }"
-                    @click="qaMinColSizeSmall = preset"
-                  >
-                    {{ preset }}
-                  </button>
-                </div>
-                <input v-model="qaMinColSizeSmall" placeholder="e.g. 200px" class="qa-panel__input" />
-              </div>
-
-              <div class="qa-panel__group">
-                <span class="qa-panel__label">min-col-size-default</span>
-                <div class="qa-panel__chips">
-                  <button
-                    v-for="preset in sizePresets"
-                    :key="preset"
-                    class="qa-panel__chip"
-                    :class="{ 'is-active': qaMinColSizeDefault === preset }"
-                    @click="qaMinColSizeDefault = preset"
-                  >
-                    {{ preset }}
-                  </button>
-                </div>
-                <input v-model="qaMinColSizeDefault" placeholder="e.g. 300px" class="qa-panel__input" />
-              </div>
-
-              <div class="qa-panel__group">
-                <span class="qa-panel__label">min-col-size-large</span>
-                <div class="qa-panel__chips">
-                  <button
-                    v-for="preset in sizePresets"
-                    :key="preset"
-                    class="qa-panel__chip"
-                    :class="{ 'is-active': qaMinColSizeLarge === preset }"
-                    @click="qaMinColSizeLarge = preset"
-                  >
-                    {{ preset }}
-                  </button>
-                </div>
-                <input v-model="qaMinColSizeLarge" placeholder="e.g. 350px" class="qa-panel__input" />
-              </div>
-
-              <div class="qa-panel__group">
-                <span class="qa-panel__label">gap</span>
-                <div class="qa-panel__chips">
-                  <button
-                    v-for="preset in gapPresets"
-                    :key="preset"
-                    class="qa-panel__chip"
-                    :class="{ 'is-active': qaGap === preset }"
-                    @click="qaGap = preset"
-                  >
-                    {{ preset }}
-                  </button>
-                </div>
-                <input v-model="qaGap" placeholder="e.g. 2rem" class="qa-panel__input" />
-              </div>
-            </div>
-          </details>
-        </div>
-
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-32']">
-          <div class="auto-grid-demo-container">
-            <AutoGrid
-              :tag="qaTag"
-              :is-responsive="qaIsResponsive"
-              :min-col-size-small="qaMinColSizeSmall"
-              :min-col-size-default="qaMinColSizeDefault"
-              :min-col-size-large="qaMinColSizeLarge"
-              :style="qaStyle"
-            >
-              <template v-for="card in statCards" #[card.id] :key="card.id">
-                <div class="stat-card">
-                  <span class="stat-card__label">{{ card.label }}</span>
-                  <span class="stat-card__value">{{ card.value }}</span>
-                </div>
-              </template>
-            </AutoGrid>
-          </div>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({ layout: false });
-
-useHead({
-  title: "AutoGrid",
-  meta: [{ name: "description", content: "AutoGrid component demo" }],
-  bodyAttrs: { class: "auto-grid-page" },
-});
-
-const isDev = import.meta.dev;
-
-const tagOptions = ["div", "section", "article", "main"] as const;
-const qaTag = ref<"div" | "section" | "article" | "main">("div");
-const qaIsResponsive = ref(false);
-const qaMinColSizeSmall = ref("250px");
-const qaMinColSizeDefault = ref("300px");
-const qaMinColSizeLarge = ref("350px");
-const qaGap = ref("1rem");
-
-const sizePresets = ["150px", "200px", "250px", "300px", "350px", "400px"];
-const gapPresets = ["0.5rem", "1rem", "1.6rem", "2.4rem", "3.2rem"];
-
-const qaStyle = computed(() => ({
-  "--auto-grid-min-col-size-small": qaMinColSizeSmall.value,
-  "--auto-grid-min-col-size-default": qaMinColSizeDefault.value,
-  "--auto-grid-min-col-size-large": qaMinColSizeLarge.value,
-  "--auto-grid-gap": qaGap.value,
-}));
-
-const statCards = [
-  { id: "item-1", label: "Revenue", value: "£24,500" },
-  { id: "item-2", label: "Clients", value: "142" },
-  { id: "item-3", label: "Bookings", value: "38" },
-  { id: "item-4", label: "Avg. Rating", value: "4.9" },
-  { id: "item-5", label: "New Users", value: "76" },
-  { id: "item-6", label: "Retention", value: "91%" },
-];
-</script>
-
-<style lang="css">
-.auto-grid-page {
-  code {
-    font-family: monospace;
-    font-size: 0.9em;
-    background: var(--slate-02);
-    padding: 0.1em 0.4em;
-    border-radius: 0.3rem;
-  }
-
-  .auto-grid-demo-container {
-    container-type: inline-size;
-  }
-
-  .stat-card {
-    display: flex;
-    flex-direction: column;
-    gap: 0.8rem;
-    padding: 2.4rem;
-    background: white;
-    border-radius: 0.8rem;
-    box-shadow: 0 2px 8px oklch(0% 0 0 / 0.08);
-  }
-
-  .stat-card__label {
-    font-size: 1.2rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--slate-08, #6b7280);
-  }
-
-  .stat-card__value {
-    font-size: 2.4rem;
-    font-weight: 700;
-    color: var(--slate-12, #111827);
-  }
-
-  /* ── 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);
-    }
-  }
-
-  .qa-panel__input {
-    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;
-    width: 18rem;
-
-    &::placeholder {
-      opacity: 0.45;
-    }
-  }
-}
-</style>

package/app/pages/banner-video.vue

@@ -1,238 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <BannerVideo
-          src="/images/banners/video/lake-banner.mp4"
-          poster="/images/banners/video/lake-banner.jpg"
-          alt="A serene lake landscape"
-          :depth="depth"
-          :aspect-ratio="aspectRatio"
-          :tag="tag"
-          :object-fit="objectFit"
-          :vertical-position="verticalPosition"
-          :horizontal-position="horizontalPosition"
-          :style-class-passthrough="['mbe-32']"
-        />
-
-        <PageRow tag="div" variant="full">
-          <div class="banner-video-demo-controls">
-            <p class="demo-controls__heading">Props</p>
-
-            <div class="demo-controls__row">
-              <MultipleRadiobuttons
-                v-model="depth"
-                v-model:field-data="depthData"
-                name="depth"
-                label="depth"
-                legend="depth"
-                error-message=""
-                :is-button="true"
-                :is-pill="true"
-                :field-has-error="false"
-                options-layout="inline"
-              />
-            </div>
-
-            <div class="demo-controls__row">
-              <MultipleRadiobuttons
-                v-model="aspectRatio"
-                v-model:field-data="aspectRatioData"
-                name="aspectRatio"
-                label="aspectRatio"
-                legend="aspectRatio"
-                error-message=""
-                :is-button="true"
-                :is-pill="true"
-                :field-has-error="false"
-                options-layout="inline"
-              />
-            </div>
-
-            <div class="demo-controls__row">
-              <MultipleRadiobuttons
-                v-model="objectFit"
-                v-model:field-data="objectFitData"
-                name="objectFit"
-                label="objectFit"
-                legend="objectFit"
-                error-message=""
-                :is-button="true"
-                :is-pill="true"
-                :field-has-error="false"
-                options-layout="inline"
-              />
-            </div>
-
-            <div class="demo-controls__row">
-              <MultipleRadiobuttons
-                v-model="verticalPosition"
-                v-model:field-data="verticalPositionData"
-                name="verticalPosition"
-                label="verticalPosition"
-                legend="verticalPosition"
-                error-message=""
-                :is-button="true"
-                :is-pill="true"
-                :field-has-error="false"
-                options-layout="inline"
-              />
-            </div>
-
-            <div class="demo-controls__row">
-              <MultipleRadiobuttons
-                v-model="horizontalPosition"
-                v-model:field-data="horizontalPositionData"
-                name="horizontalPosition"
-                label="horizontalPosition"
-                legend="horizontalPosition"
-                error-message=""
-                :is-button="true"
-                :is-pill="true"
-                :field-has-error="false"
-                options-layout="inline"
-              />
-            </div>
-
-            <div class="demo-controls__row">
-              <MultipleRadiobuttons
-                v-model="tag"
-                v-model:field-data="tagData"
-                name="tag"
-                label="tag"
-                legend="tag"
-                error-message=""
-                :is-button="true"
-                :is-pill="true"
-                :field-has-error="false"
-                options-layout="inline"
-              />
-            </div>
-          </div>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IFormMultipleOptions } from "~/types/forms/types.forms";
-
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "BannerVideo",
-  meta: [{ name: "description", content: "BannerVideo component demo" }],
-  bodyAttrs: { class: "banner-video-page" },
-});
-
-const depth = ref<"xs" | "sm" | "md" | "lg" | "xl">("md");
-const aspectRatio = ref("21/9");
-const tag = ref<"section" | "div" | "header" | "main" | "article">("section");
-const objectFit = ref<"cover" | "contain" | "fill" | "none" | "scale-down">("cover");
-const verticalPosition = ref<"start" | "center" | "end">("center");
-const horizontalPosition = ref<"start" | "center" | "end">("center");
-
-const depthData = ref<IFormMultipleOptions>({
-  data: [
-    { id: "depth-xs", name: "depth", value: "xs", label: "xs" },
-    { id: "depth-sm", name: "depth", value: "sm", label: "sm" },
-    { id: "depth-md", name: "depth", value: "md", label: "md" },
-    { id: "depth-lg", name: "depth", value: "lg", label: "lg" },
-    { id: "depth-xl", name: "depth", value: "xl", label: "xl" },
-  ],
-  total: 5,
-  skip: 0,
-  limit: 5,
-});
-
-const aspectRatioData = ref<IFormMultipleOptions>({
-  data: [
-    { id: "ar-16-9", name: "aspectRatio", value: "16/9", label: "16/9" },
-    { id: "ar-21-9", name: "aspectRatio", value: "21/9", label: "21/9" },
-    { id: "ar-4-3", name: "aspectRatio", value: "4/3", label: "4/3" },
-    { id: "ar-1-1", name: "aspectRatio", value: "1/1", label: "1/1" },
-  ],
-  total: 4,
-  skip: 0,
-  limit: 4,
-});
-
-const tagData = ref<IFormMultipleOptions>({
-  data: [
-    { id: "tag-section", name: "tag", value: "section", label: "section" },
-    { id: "tag-div", name: "tag", value: "div", label: "div" },
-    { id: "tag-header", name: "tag", value: "header", label: "header" },
-    { id: "tag-main", name: "tag", value: "main", label: "main" },
-    { id: "tag-article", name: "tag", value: "article", label: "article" },
-  ],
-  total: 5,
-  skip: 0,
-  limit: 5,
-});
-
-const objectFitData = ref<IFormMultipleOptions>({
-  data: [
-    { id: "fit-cover", name: "objectFit", value: "cover", label: "cover" },
-    { id: "fit-contain", name: "objectFit", value: "contain", label: "contain" },
-    { id: "fit-fill", name: "objectFit", value: "fill", label: "fill" },
-    { id: "fit-none", name: "objectFit", value: "none", label: "none" },
-    { id: "fit-scale-down", name: "objectFit", value: "scale-down", label: "scale-down" },
-  ],
-  total: 5,
-  skip: 0,
-  limit: 5,
-});
-
-const verticalPositionData = ref<IFormMultipleOptions>({
-  data: [
-    { id: "vp-start", name: "verticalPosition", value: "start", label: "start (top)" },
-    { id: "vp-center", name: "verticalPosition", value: "center", label: "center" },
-    { id: "vp-end", name: "verticalPosition", value: "end", label: "end (bottom)" },
-  ],
-  total: 3,
-  skip: 0,
-  limit: 3,
-});
-
-const horizontalPositionData = ref<IFormMultipleOptions>({
-  data: [
-    { id: "hp-start", name: "horizontalPosition", value: "start", label: "start (left)" },
-    { id: "hp-center", name: "horizontalPosition", value: "center", label: "center" },
-    { id: "hp-end", name: "horizontalPosition", value: "end", label: "end (right)" },
-  ],
-  total: 3,
-  skip: 0,
-  limit: 3,
-});
-</script>
-
-<style lang="css">
-.banner-video-page {
-  .banner-video-demo-controls {
-    padding: 1.6rem;
-    border: 1px solid var(--slate-06);
-    border-radius: 0.8rem;
-    /* background: var(--slate-01); */
-
-    .demo-controls__heading {
-      font-size: 1.1rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-      color: var(--slate-08);
-      margin-block-end: 1.2rem;
-    }
-
-    .demo-controls__row {
-      margin-block-end: 1.2rem;
-
-      &:last-child {
-        margin-block-end: 0;
-      }
-    }
-  }
-}
-</style>