srcdev-nuxt-components 8.0.2 → 9.0.0

package/app/pages/index.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1">Nuxt3 Components Layer</h1>
+          <p>
+            A collection of hand rolled UI components for Nuxt3 that can be added as a layer (extended into another
+            Nuxt3 app)
+          </p>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1">Services test pages</h1>
+          <NuxtLink class="page-body-normal" to="/ui/services/services-cards">Services Cards</NuxtLink>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <NuxtLink class="page-body-normal" to="/ui/services/services-sections-compact">
+            Services Sections Compact
+          </NuxtLink>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1">Profile Section</h1>
+          <NuxtLink class="page-body-normal" to="/ui/profile-section">Profile Section</NuxtLink>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1">Contact Section</h1>
+          <NuxtLink class="page-body-normal" to="/ui/contact-section">Contact Section</NuxtLink>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1">Treatment Consultant</h1>
+          <NuxtLink class="page-body-normal" to="/ui/services/treatment-consultant">Treatment Consultant</NuxtLink>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="inset-content" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">PopOver component 1</h2>
+          <ClientOnly>
+            <p>popoverSupported({{ popoverSupported }})</p>
+          </ClientOnly>
+
+          <PopOver popovertarget="profile1">
+            <template #trigger>
+              <img class="profile-image" src="https://ui-avatars.com/api/name=1?background=0A8A0A&color=fff" alt="" />
+            </template>
+            <template #popoverCotent>
+              <h2>Popover content 1</h2>
+            </template>
+          </PopOver>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="inset-content" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">PopOver component 2</h2>
+          <div class="justify-end">
+            <PopOver popovertarget="profile2">
+              <template #trigger>
+                <img class="profile-image" src="https://ui-avatars.com/api/name=2?background=0A8A0A&color=fff" alt="" />
+              </template>
+              <template #popoverCotent>
+                <h2>Popover content 2</h2>
+              </template>
+            </PopOver>
+          </div>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">Masonry Grid</h2>
+          <MasonryGrid :grid-data="quotesData?.quotes.slice(0, qoutesDisplayCount) ?? {}">
+            <template
+              v-for="(item, index) in quotesData?.quotes.slice(0, qoutesDisplayCount)"
+              :key="item.id"
+              #[item.id]
+            >
+              <div>
+                <p class="">{{ index + 1 }}: {{ item.author }}</p>
+                <p class="">{{ item.quote }}</p>
+              </div>
+            </template>
+          </MasonryGrid>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IQuotes } from "~/types/types.quotes";
+
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Home",
+  meta: [{ name: "description", content: "Nuxt Components Layer extending a Nuxt project" }],
+  bodyAttrs: {
+    class: "home",
+  },
+});
+
+const qoutesDisplayCount = 21;
+const { data: quotesData } = await useFetch<IQuotes>("https://dummyjson.com/quotes");
+
+const popoverSupported = computed(() => {
+  return "anchorName" in document.documentElement.style;
+});
+</script>
+
+<style lang="css">
+.justify-end {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.qr-code {
+  width: 250px;
+  height: 250px;
+}
+</style>

package/app/pages/typography/hero-text.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1">Typography - Hero Text</h1>
+          <p class="page-body-normal">Hero text styles</p>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">Change variants</h2>
+          <div class="demo-row">
+            <div>
+              <strong>Axis:</strong>
+              <select v-model="axisOptions">
+                <option value="horizontal">Horizontal</option>
+                <option value="vertical">Vertical</option>
+              </select>
+            </div>
+            <div>
+              <strong>Font Size:</strong>
+              <select v-model="fontSizeOptions">
+                <option value="display">Display</option>
+                <option value="title">Title</option>
+                <option value="heading">Heading</option>
+                <option value="subheading">Subheading</option>
+                <option value="label">Label</option>
+              </select>
+            </div>
+          </div>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">{{ axisOptions }}: {{ fontSizeOptions }} Variant</h2>
+          <HeroText
+            tag="h1"
+            :axis="axisOptions"
+            :font-size="fontSizeOptions"
+            :text-content="[
+              {
+                text: 'Designing',
+                styleClass: 'normal',
+              },
+              {
+                text: 'Artistry',
+                styleClass: 'accent',
+              },
+              {
+                text: 'at Home',
+                styleClass: 'normal',
+              },
+            ]"
+            :style-class-passthrough="['class-demo']"
+          />
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Typography - Hero Text",
+  meta: [{ name: "description", content: "Typography - Hero Text" }],
+  bodyAttrs: {
+    class: "page-typography-hero-text",
+  },
+});
+
+const axisOptions = ref<"horizontal" | "vertical">("horizontal");
+const fontSizeOptions = ref<"display" | "title" | "heading" | "subheading" | "label">("display");
+</script>
+
+<style lang="css">
+.page-typography-hero-text {
+  .demo-row {
+    display: flex;
+    gap: 2rem;
+    margin-block: 1.5rem;
+
+    & > div {
+      display: flex;
+      flex-direction: column;
+      gap: 1.6rem;
+
+      select {
+        padding: 0.25rem;
+        font-size: 1.6rem;
+      }
+    }
+  }
+}
+</style>

package/app/pages/typography/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1">Typography</h1>
+          <h2 class="page-heading-2">Example styles used within page content</h2>
+          <p class="page-body-normal">Use within main body content</p>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+})
+
+useHead({
+  title: "Typography",
+  meta: [{ name: "description", content: "Typography" }],
+  bodyAttrs: {
+    class: "page-typography",
+  },
+})
+</script>
+
+<style lang="css">
+.page-typography {
+  .class-demo {
+    margin-block-end: 1rem;
+    pre {
+      display: block;
+      margin-block: 0;
+    }
+  }
+}
+</style>

package/app/pages/typography/page-body.vue

@@ -0,0 +1,171 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1">Typography - Body Text</h1>
+          <p class="page-body-normal">Page body styles</p>
+          <p class="page-body-normal">Use within main body content</p>
+
+          <div class="demo-row">
+            <strong>page-body-large-light</strong>
+            <div class="class-demo page-body-large-light">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-body-large</strong>
+            <div class="class-demo page-body-large">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-body-large-semibold</strong>
+            <div class="class-demo page-body-large-semibold">
+              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
+            </div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-body-large-bold</strong>
+            <div class="class-demo page-body-large-bold">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-body-medium-light</strong>
+            <div class="class-demo page-body-medium-light">
+              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
+            </div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-body-medium</strong>
+            <div class="class-demo page-body-medium">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-body-medium-semibold</strong>
+            <div class="class-demo page-body-medium-semibold">
+              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
+            </div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-body-medium-bold</strong>
+            <div class="class-demo page-body-medium-bold">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-body-medium-semibold</strong>
+            <div class="class-demo page-body-medium-semibold">
+              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
+            </div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-body-medium-bold</strong>
+            <div class="class-demo page-body-medium-bold">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-body-normal-light</strong>
+            <div class="class-demo page-body-normal-light">
+              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
+            </div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-body-normal</strong>
+            <div class="class-demo page-body-normal">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-body-normal-semibold</strong>
+            <div class="class-demo page-body-normal-semibold">
+              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
+            </div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-body-normal-bold</strong>
+            <div class="class-demo page-body-normal-bold">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-body-small-light</strong>
+            <div class="class-demo page-body-small-light">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-body-small</strong>
+            <div class="class-demo page-body-small">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-body-small-semibold</strong>
+            <div class="class-demo page-body-small-semibold">
+              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
+            </div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-body-small-bold</strong>
+            <div class="class-demo page-body-small-bold">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-body-xsmall-light</strong>
+            <div class="class-demo page-body-xsmall-light">
+              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
+            </div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-body-xsmall</strong>
+            <div class="class-demo page-body-xsmall">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-body-xsmall-semibold</strong>
+            <div class="class-demo page-body-xsmall-semibold">
+              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
+            </div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-body-xsmall-bold</strong>
+            <div class="class-demo page-body-xsmall-bold">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
+          </div>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+})
+
+useHead({
+  title: "Typography",
+  meta: [{ name: "description", content: "Typography" }],
+  bodyAttrs: {
+    class: "page-typography-body",
+  },
+})
+</script>
+
+<style lang="css">
+.page-typography-body {
+  .demo-row {
+    margin-block-end: 1rem;
+    strong {
+      display: block;
+      margin-block: 0;
+    }
+    .class-demo {
+      display: block;
+      margin-block-end: 1rem;
+    }
+  }
+}
+</style>

package/app/pages/typography/page-heading.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1">Typography - Heading Text</h1>
+          <p class="page-body-normal">Page heading styles</p>
+          <p class="page-body-normal">Use within main body content</p>
+
+          <div class="demo-row">
+            <strong>page-heading-1</strong>
+            <div class="class-demo page-heading-1">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-heading-2</strong>
+            <div class="class-demo page-heading-2">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-heading-3</strong>
+            <div class="class-demo page-heading-3">
+              Lorum ipsum dolor sit amet, consectetur adipiscing elit. Lorum ipsum dolor sit amet, consectetur
+              adipiscing elit.
+            </div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-heading-4</strong>
+            <div class="class-demo page-heading-4">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-heading-5</strong>
+            <div class="class-demo page-heading-5">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-heading-6</strong>
+            <div class="class-demo page-heading-6">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
+          </div>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+})
+
+useHead({
+  title: "Typography",
+  meta: [{ name: "description", content: "Typography" }],
+  bodyAttrs: {
+    class: "page-typography-heading",
+  },
+})
+</script>
+
+<style lang="css">
+.page-typography-heading {
+  .demo-row {
+    margin-block-end: 1rem;
+    strong {
+      display: block;
+      margin-block: 0;
+    }
+    .class-demo {
+      display: block;
+      margin-block-end: 1rem;
+    }
+  }
+}
+</style>

package/app/pages/typography/page-link.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1">Typography - Link Text</h1>
+          <p class="page-body-normal">Page link styles</p>
+          <p class="page-body-normal">Use within main body content</p>
+
+          <div class="demo-row">
+            <strong>page-link-large</strong>
+            <a href="#" class="class-demo page-link-large">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</a>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-link-large-semibold</strong>
+            <a href="#" class="class-demo page-link-large-semibold">
+              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
+            </a>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-link-medium</strong>
+            <a href="#" class="class-demo page-link-medium">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</a>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-link-medium-semibold</strong>
+            <a href="#" class="class-demo page-link-medium-semibold">
+              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
+            </a>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-link-normal</strong>
+            <a href="#" class="class-demo page-link-normal">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</a>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-link-normal-semibold</strong>
+            <a href="#" class="class-demo page-link-normal-semibold">
+              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
+            </a>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-link-small</strong>
+            <a href="#" class="class-demo page-link-small">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</a>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-link-small-semibold</strong>
+            <a href="#" class="class-demo page-link-small-semibold">
+              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
+            </a>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-link-xsmall</strong>
+            <a href="#" class="class-demo page-link-xsmall">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</a>
+          </div>
+
+          <div class="demo-row">
+            <strong>page-link-xsmall-semibold</strong>
+            <a href="#" class="class-demo page-link-xsmall-semibold">
+              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
+            </a>
+          </div>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+})
+
+useHead({
+  title: "Typography",
+  meta: [{ name: "description", content: "Typography" }],
+  bodyAttrs: {
+    class: "page-typography-link",
+  },
+})
+</script>
+
+<style lang="css">
+.page-typography-link {
+  .demo-row {
+    margin-block-end: 1rem;
+    strong {
+      display: block;
+      margin-block: 0;
+    }
+    .class-demo {
+      display: inline-block;
+      margin-block-end: 1rem;
+    }
+  }
+}
+</style>