srcdev-nuxt-components 9.3.6 → 9.3.8

package/app/pages/ui/masonry-columns.vue

@@ -1,55 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-3">Masonry Grid Ordered</h1>
-          <p class="page-body-normal">Masonry grid ordered displaying dummy posts data</p>
-          <CanvasSwitcher v-model:canvas-name="canvasName" />
-        </PageRow>
-
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <div v-if="status === 'success'" class="masonry-columns">
-            <div
-              v-for="(item, index) in quotesData?.quotes.slice(0, displayCount)"
-              :key="index"
-              class="p-10 border border-1 border-grey-dark border-r-4"
-            >
-              <p class="text-normal wght-700">{{ index + 1 }}: {{ item.author }}</p>
-              <p class="text-normal">{{ item.quote }}</p>
-            </div>
-          </div>
-          <p v-else class="page-body-normal">&hellip;Loading</p>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IQuotes } from "~/types/types.quotes";
-import type { MediaCanvas } from "~/types/components";
-
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Masonry Grid Ordered",
-  meta: [{ name: "description", content: "Masonry Grid Ordered" }],
-  bodyAttrs: {
-    class: "",
-  },
-});
-const canvasName = ref<MediaCanvas>("desktopCanvas");
-
-const displayCount = 12;
-const { data: quotesData, status } = await useFetch<IQuotes>("https://dummyjson.com/quotes");
-</script>
-
-<style lang="css">
-.masonry-columns {
-  /* column-count: 3; */
-  columns: 300px;
-}
-</style>

package/app/pages/ui/masonry-grid-ordered-experiment.vue

@@ -1,79 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-3">Masonry Grid Ordered</h1>
-          <p class="page-body-normal">Masonry grid ordered displaying dummy posts data</p>
-          <CanvasSwitcher v-model:canvas-name="canvasName" />
-        </PageRow>
-
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <MasonryGridOrderedGridExperiment
-            v-if="status === 'success'"
-            :grid-data="quotesData?.quotes?.slice(0, displayCount).map((q) => ({ ...q, id: String(q.id) })) ?? []"
-            :gap="12"
-            :min-tile-width="300"
-            :fixed-width="useFixedWidth"
-            :style-class-passthrough="[canvasName, 'mi-auto']"
-          >
-            <template v-for="(item, index) in quotesData?.quotes.slice(0, displayCount)" :key="item.id" #[item.id]>
-              <div class="demo-grid-item-content">
-                <p class="text-normal wght-700">{{ index + 1 }}: {{ item.author }}</p>
-                <p class="text-normal">{{ item.quote }}</p>
-              </div>
-            </template>
-          </MasonryGridOrderedGridExperiment>
-          <p v-else class="page-body-normal">&hellip;Loading</p>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IQuotes } from "~/types/types.quotes";
-import type { MediaCanvas } from "~/types/components";
-
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Masonry Grid Ordered",
-  meta: [{ name: "description", content: "Masonry Grid Ordered" }],
-  bodyAttrs: {
-    class: "",
-  },
-});
-const canvasName = ref<MediaCanvas>("desktopCanvas");
-
-const useFixedWidth = true;
-const displayCount = 12;
-const { data: quotesData, status } = await useFetch<IQuotes>("https://dummyjson.com/quotes");
-</script>
-
-<style lang="css">
-.mi-auto {
-  --_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
-
-  &.masonry-grid-ordered {
-    .masonry-grid-ordered-wrapper {
-      background-color: blueviolet;
-
-      .masonry-grid-ordered-item {
-        background-color: darkcyan;
-
-        .masonry-grid-ordered-content {
-          background-color: brown;
-
-          .demo-grid-item-content {
-            outline: 0.1rem solid var(--_border-color);
-            padding: 1.2rem;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

package/app/pages/ui/masonry-grid-ordered.vue

@@ -1,56 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-3">Masonry Grid Ordered</h1>
-          <p class="page-body-normal">Masonry grid ordered displaying dummy posts data</p>
-          <CanvasSwitcher v-model:canvas-name="canvasName" />
-        </PageRow>
-
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <MasonryGridOrdered
-            v-if="status === 'success'"
-            :grid-data="quotesData?.quotes.slice(0, displayCount) ?? []"
-            :gap="12"
-            :min-tile-width="300"
-            :fixed-width="useFixedWidth"
-            :style-class-passthrough="[canvasName, 'mi-auto']"
-          >
-            <template v-for="(item, index) in quotesData?.quotes.slice(0, displayCount)" :key="item.id" #[item.id]>
-              <div class="p-10 border border-1 border-grey-dark border-r-4">
-                <p class="text-normal wght-700">{{ index + 1 }}: {{ item.author }}</p>
-                <p class="text-normal">{{ item.quote }}</p>
-              </div>
-            </template>
-          </MasonryGridOrdered>
-          <p v-else class="page-body-normal">&hellip;Loading</p>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IQuotes } from "~/types/types.quotes";
-import type { MediaCanvas } from "~/types/components";
-
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Masonry Grid Ordered",
-  meta: [{ name: "description", content: "Masonry Grid Ordered" }],
-  bodyAttrs: {
-    class: "",
-  },
-});
-const canvasName = ref<MediaCanvas>("desktopCanvas");
-
-const useFixedWidth = true;
-const displayCount = 12;
-const { data: quotesData, status } = await useFetch<IQuotes>("https://dummyjson.com/quotes");
-</script>
-
-<style lang="css"></style>

package/app/pages/ui/masonry-grid-sorted.vue

@@ -1,55 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-2">Masonry Grid</h1>
-          <CanvasSwitcher v-model:canvas-name="canvasName" />
-        </PageRow>
-
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <MasonryGridSorted
-            :grid-data="quotesData?.quotes.slice(0, qoutesDisplayCount) ?? []"
-            :item-min-width="350"
-            :gap="3.2"
-            unit="rem"
-            :style-class-passthrough="[canvasName, 'mi-auto']"
-          >
-            <template
-              v-for="(item, index) in quotesData?.quotes.slice(0, qoutesDisplayCount)"
-              :key="item.id"
-              #[item.id]
-            >
-              <div class="">
-                <p class="">{{ index + 1 }}: {{ item.author }}</p>
-                <p class="">{{ item.quote }}</p>
-              </div>
-            </template>
-          </MasonryGridSorted>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IQuotes } from "~/types/types.quotes";
-import type { MediaCanvas } from "~/types/components";
-
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Masonry Grid",
-  meta: [{ name: "description", content: "Masonry Grid - Nuxt Components Layer extending a Nuxt project" }],
-  bodyAttrs: {
-    class: "home",
-  },
-});
-
-const canvasName = ref<MediaCanvas>("desktopCanvas");
-
-const qoutesDisplayCount = 21;
-const { data: quotesData } = await useFetch<IQuotes>("https://dummyjson.com/quotes");
-</script>

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

@@ -1,55 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-2">Masonry Grid</h1>
-          <CanvasSwitcher v-model:canvas-name="canvasName" />
-        </PageRow>
-
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <MasonryGrid
-            :grid-data="quotesData?.quotes.slice(0, qoutesDisplayCount) ?? []"
-            :item-min-width="350"
-            :gap="3.2"
-            unit="rem"
-            :style-class-passthrough="[canvasName, 'mi-auto']"
-          >
-            <template
-              v-for="(item, index) in quotesData?.quotes.slice(0, qoutesDisplayCount)"
-              :key="item.id"
-              #[item.id]
-            >
-              <div class="">
-                <p class="">{{ index + 1 }}: {{ item.author }}</p>
-                <p class="">{{ item.quote }}</p>
-              </div>
-            </template>
-          </MasonryGrid>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IQuotes } from "~/types/types.quotes";
-import type { MediaCanvas } from "~/types/components";
-
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Masonry Grid",
-  meta: [{ name: "description", content: "Masonry Grid - Nuxt Components Layer extending a Nuxt project" }],
-  bodyAttrs: {
-    class: "home",
-  },
-});
-
-const canvasName = ref<MediaCanvas>("desktopCanvas");
-
-const qoutesDisplayCount = 21;
-const { data: quotesData } = await useFetch<IQuotes>("https://dummyjson.com/quotes");
-</script>