srcdev-nuxt-components 9.3.6 → 9.3.8

package/app/pages/ui/deep-expanding-menu.vue

@@ -1,138 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbs-32']">
-          <h1 class="page-heading-2">Deep Expanding Menu</h1>
-          <p>
-            A horizontal navigation menu using the CSS Popover API. Top-level items can be direct links or toggle a
-            panel of child links below them.
-          </p>
-        </PageRow>
-
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbs-32']">
-          <h2 class="page-heading-3 mbe-16">Basic example</h2>
-          <div class="demo-surface">
-            <DeepExpandingMenu :nav-links="basicLinks" />
-          </div>
-        </PageRow>
-
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbs-32']">
-          <h2 class="page-heading-3 mbe-16">Mixed links and groups</h2>
-          <div class="demo-surface">
-            <DeepExpandingMenu :nav-links="mixedLinks" />
-          </div>
-        </PageRow>
-
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbs-32', 'mbe-64']">
-          <h2 class="page-heading-3 mbe-16">Many child links</h2>
-          <div class="demo-surface">
-            <DeepExpandingMenu :nav-links="richLinks" />
-          </div>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { ResponsiveHeaderNavItem } from "~/types/components";
-
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Deep Expanding Menu",
-  meta: [{ name: "description", content: "Examples of Deep Expanding Menu UI Component" }],
-  bodyAttrs: {
-    class: "deep-expanding-menu-page",
-  },
-});
-
-const basicLinks: ResponsiveHeaderNavItem[] = [
-  { name: "Home", path: "/" },
-  { name: "About", path: "#about" },
-  {
-    name: "Services",
-    childLinksTitle: "Our Services",
-    childLinks: [
-      { name: "Consulting", path: "#consulting" },
-      { name: "Design", path: "#design" },
-      { name: "Development", path: "#development" },
-    ],
-  },
-  { name: "Contact", path: "#contact" },
-];
-
-const mixedLinks: ResponsiveHeaderNavItem[] = [
-  { name: "Home", path: "/" },
-  {
-    name: "Products",
-    childLinksTitle: "Browse Products",
-    childLinks: [
-      { name: "Electronics", path: "#electronics" },
-      { name: "Clothing", path: "#clothing" },
-      { name: "Books", path: "#books" },
-      { name: "Accessories", path: "#accessories" },
-    ],
-  },
-  {
-    name: "Company",
-    childLinksTitle: "About Us",
-    childLinks: [
-      { name: "Our Story", path: "#story" },
-      { name: "Team", path: "#team" },
-      { name: "Careers", path: "#careers" },
-    ],
-  },
-  { name: "Blog", path: "#blog" },
-  { name: "Contact", path: "#contact" },
-];
-
-const richLinks: ResponsiveHeaderNavItem[] = [
-  {
-    name: "Components",
-    childLinksTitle: "UI Components",
-    childLinks: [
-      { name: "Carousel", path: "/ui/carousel-basic" },
-      { name: "Accordian", path: "/ui/accordian" },
-      { name: "Tabs", path: "/ui/tabs" },
-      { name: "Dialogs", path: "/ui/display-dialog" },
-      { name: "Tooltips", path: "/ui/tooltips" },
-      { name: "Display Toast", path: "/ui/display-toast" },
-      { name: "Card Core", path: "/ui/card-core" },
-      { name: "Glowing Border", path: "/ui/glowing-border" },
-    ],
-  },
-  {
-    name: "Layouts",
-    childLinksTitle: "Layout Components",
-    childLinks: [
-      { name: "Simple Grid", path: "/ui/simple-grid" },
-      { name: "Masonry Grid", path: "/ui/masonry-grid" },
-      { name: "Block Decorators", path: "/ui/block-decorators" },
-    ],
-  },
-  {
-    name: "Navigation",
-    childLinksTitle: "Navigation Components",
-    childLinks: [
-      { name: "Site Navigation", path: "/ui/navigation/site-navigation" },
-      { name: "Nav Horizontal", path: "/ui/navigation/navigation-horizontal" },
-      { name: "Deep Expanding Menu", path: "/ui/deep-expanding-menu" },
-      { name: "Magnetic Navigation", path: "/ui/magnetic-navigation" },
-    ],
-  },
-];
-</script>
-
-<style lang="css">
-.demo-surface {
-  /* background-color: light-dark(var(--slate-01), var(--slate-09)); */
-  /* border: 1px solid light-dark(var(--slate-03), var(--slate-07)); */
-  border-radius: 1.2rem;
-  padding: 2.4rem;
-  overflow: visible;
-}
-</style>

package/app/pages/ui/display-avatar.vue

@@ -1,253 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="popout">
-          <h1 class="page-heading-2">Display Avatar</h1>
-
-          <form>
-            <div class="form-row">
-              <div class="form-col">
-                <label for="size">Size - {{ chipConfig.size }}</label>
-                <input @input="changeSize" id="size" type="range" min="1" max="24" :value="12" />
-              </div>
-              <div class="form-col">
-                <label for="maskWidth">Mask Width - {{ chipConfig.maskWidth }}</label>
-                <input @input="changeMaskWidth" id="maskWidth" type="range" min="0" max="12" :value="4" />
-              </div>
-              <div class="form-col">
-                <label for="offset">Offset - {{ chipConfig.offset }}</label>
-                <input @input="changeOffset" id="offset" type="range" min="-12" max="12" :value="2" />
-              </div>
-              <div class="form-col">
-                <label for="angle">Angle - {{ chipConfig.angle }}</label>
-                <input @input="changeAngle" id="angle" type="range" min="0" max="360" :value="45" />
-              </div>
-            </div>
-          </form>
-
-          <section>
-            <div class="dl">
-              <div class="dt">Alt tag only</div>
-              <div class="dd">
-                <DisplayAvatar alt="Joe Bloggs" size="s" />
-              </div>
-            </div>
-          </section>
-
-          <section>
-            <div class="dl">
-              <div class="dt">Has Avatar image</div>
-              <div class="dd">
-                <DisplayAvatar
-                  src="https://github.com/srcdev.png"
-                  alt="Joe Bloggs"
-                  :style-class-passthrough="['online']"
-                />
-              </div>
-            </div>
-          </section>
-
-          <section>
-            <div class="dl">
-              <div class="dt">Has Avatar image and Chip</div>
-              <div class="dd">
-                <DisplayAvatar
-                  src="https://github.com/srcdev.png"
-                  alt="Joe Bloggs"
-                  :chip="chipConfig"
-                  :style-class-passthrough="['online']"
-                />
-              </div>
-            </div>
-          </section>
-
-          <section>
-            <div class="dl">
-              <div class="dt">Has Avatar image and Chip (with icon)</div>
-              <div class="dd">
-                <DisplayAvatar
-                  src="https://github.com/srcdev.png"
-                  alt="Joe Bloggs"
-                  :chip="{ ...chipConfig, icon: 'material-symbols:star-outline', size: '16px', maskWidth: '6px' }"
-                  :style-class-passthrough="['online']"
-                />
-              </div>
-            </div>
-          </section>
-
-          <section>
-            <div class="dl">
-              <div class="dt">Has Avatar Icon</div>
-              <div class="dd">
-                <DisplayAvatar alt="" :style-class-passthrough="['online']">
-                  <template #icon><Icon name="material-symbols:star-outline" class="avatar-icon" /></template>
-                </DisplayAvatar>
-              </div>
-            </div>
-          </section>
-
-          <section>
-            <div class="dl">
-              <div class="dt">Has Avatar image and Chip (text single character)</div>
-              <div class="dd">
-                <DisplayAvatar
-                  src="https://github.com/srcdev.png"
-                  alt="Joe Bloggs"
-                  :chip="{ ...chipConfig, label: '3', size: '16px', maskWidth: '6px' }"
-                  :style-class-passthrough="['online']"
-                />
-              </div>
-            </div>
-          </section>
-
-          <section>
-            <div class="dl">
-              <div class="dt">Has Avatar image and Chip (text 2 character)</div>
-              <div class="dd">
-                <DisplayAvatar
-                  src="https://github.com/srcdev.png"
-                  alt="Joe Bloggs"
-                  :chip="{ ...chipConfig, label: '+2', size: '16px', maskWidth: '6px' }"
-                  :style-class-passthrough="['online']"
-                />
-              </div>
-            </div>
-          </section>
-
-          <section>
-            <div class="dl">
-              <div class="dt">Round</div>
-              <div class="dd">
-                <DisplayChip shape="circle" :config="chipConfig" :style-class-passthrough="['online']">
-                  <div class="demo-content round">
-                    <Icon name="akar-icons:info" size="24" color="white" />
-                  </div>
-                </DisplayChip>
-              </div>
-
-              <div class="dt">Square</div>
-              <div class="dd">
-                <DisplayChip shape="square" :config="chipConfig" :style-class-passthrough="['idle']">
-                  <div class="demo-content square">
-                    <Icon name="akar-icons:info" size="24" color="white" />
-                  </div>
-                </DisplayChip>
-              </div>
-            </div>
-          </section>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { type DisplayChipConfig } from "~/types/components";
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "UI Display Avatar",
-  meta: [{ name: "description", content: "Examples of UI Display Avatars" }],
-  bodyAttrs: {
-    class: "ui-display-avatar-page",
-  },
-});
-
-const chipConfig = reactive<DisplayChipConfig>({
-  size: "12px",
-  maskWidth: "4px",
-  offset: "2px",
-  angle: "45deg",
-});
-
-const changeSize = (e: Event) => {
-  const target = e.target as HTMLInputElement;
-  chipConfig.size = `${target.value}px`;
-};
-
-const changeMaskWidth = (e: Event) => {
-  const target = e.target as HTMLInputElement;
-  chipConfig.maskWidth = `${target.value}px`;
-};
-
-const changeOffset = (e: Event) => {
-  const target = e.target as HTMLInputElement;
-  chipConfig.offset = `${target.value}px`;
-};
-
-const changeAngle = (e: Event) => {
-  const target = e.target as HTMLInputElement;
-  chipConfig.angle = `${target.value}deg`;
-};
-</script>
-
-<style lang="css">
-.ui-display-avatar-page {
-  form {
-    margin-bottom: 2rem;
-
-    .form-row {
-      .form-col {
-        display: grid;
-        grid-template-columns: 200px 200px;
-        gap: 1rem;
-        padding: 0.5rem 0;
-
-        label {
-          font-weight: bold;
-        }
-
-        input {
-          padding: 0.5rem;
-          border: 1px solid var(--slate-07);
-          border-radius: 4px;
-          font-size: 1rem;
-        }
-      }
-    }
-  }
-  section {
-    margin-top: 2rem;
-
-    .dl {
-      display: grid;
-      grid-template-columns: auto auto;
-      gap: 2rem;
-      align-items: center;
-      justify-content: start;
-
-      /* background-color: var(--slate-05); */
-
-      .dt {
-        font-weight: bold;
-      }
-      .dd {
-        margin: 0;
-
-        .demo-content {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          &.round {
-            width: 50px;
-            height: 50px;
-            background-color: var(--slate-10);
-            border-radius: 50%;
-          }
-
-          &.square {
-            width: 50px;
-            height: 50px;
-            background-color: var(--slate-10);
-            border-radius: 4px;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

package/app/pages/ui/display-banner.vue

@@ -1,78 +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">DisplayBanner</h1>
-        </PageRow>
-
-        <DisplayBanner tag="div" :style-class-passthrough="['mbe-20']">
-          <template #canvas>
-            <NuxtImg src="/images/banners/test-banner/banner-ginger-desktop.jpeg" class="image" alt="" />
-          </template>
-          <template #layout-content>
-            <h2 class="page-heading-2">Display Banner Content</h2>
-          </template>
-        </DisplayBanner>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Display Banner",
-  meta: [
-    {
-      name: "description",
-      content: "Display Banner Meta description content",
-    },
-  ],
-  bodyAttrs: {
-    class: "display-banner-page",
-  },
-});
-</script>
-
-<style lang="css">
-.display-banner-page {
-  .display-banner {
-    .canvas {
-      grid-area: banner;
-      width: 100%;
-      height: 150px;
-
-      @container (min-width: 768px) {
-        height: 200px;
-      }
-      @container (min-width: 1024px) {
-        height: 250px;
-      }
-      @container (min-width: 1280px) {
-        height: 300px;
-      }
-
-      transition: height 0.3s ease-in-out;
-
-      .image {
-        object-fit: cover;
-        width: 100%;
-        height: 100%;
-      }
-    }
-    .content {
-      grid-area: banner;
-      align-self: center;
-      justify-self: center;
-
-      h2 {
-        color: var(--slate-00);
-      }
-    }
-  }
-}
-</style>