srcdev-nuxt-components 8.0.2 → 9.0.0

package/app/pages/ui/container-glow.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-2">Container Glow Effect</h1>
+          <p>Glow will track mouse position</p>
+
+          <ContainerGlowCore
+            :item-count="data.length"
+            tag="div"
+            :style-class-passthrough="['class-scope', 'pbe-20']"
+            :config="{
+              proximity: 40,
+              spread: 80,
+              blur: 20,
+              gap: 32,
+              vertical: false,
+              inactiveOpacity: 0,
+            }"
+          >
+            <template v-for="(item, key) in data" :key="key" #[`container-glow-${key}`]>
+              <div class="example-card p-12">
+                <h3 class="page-heading-3">{{ item.title }}</h3>
+                <p class="pbs-24">{{ item.content }}</p>
+              </div>
+            </template>
+          </ContainerGlowCore>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Container Glow Effect",
+  meta: [{ name: "description", content: "Container Glow Effect" }],
+  bodyAttrs: {
+    class: "container-glow-core-page",
+  },
+});
+
+const data = [
+  {
+    title: "Trigger Item 1",
+    content:
+      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet!. Lorem ipsum dolor sit, adipisicing elit. Iusto, amet!",
+  },
+  {
+    title: "Trigger Item 2",
+    content: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet!",
+  },
+  {
+    title: "Trigger Item 3",
+    content:
+      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet!, Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet!",
+  },
+];
+</script>
+
+<style lang="css">
+.class-scope {
+  &.container-glow-wrapper {
+    .container-glow-core {
+      --gradient: conic-gradient(
+        from 180deg at 50% 70%,
+        hsla(0, 0%, 98%, 1) 0deg,
+        #54ff0b 144.0000021457672deg,
+        hsla(0, 0%, 98%, 1) 1turn
+      );
+
+      height: 100%;
+      background: light-dark(white, hsl(246 44% 7%));
+      padding: 2rem;
+      aspect-ratio: 330 / 400;
+      border-radius: 12px;
+      min-width: 280px;
+      max-width: 280px;
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+
+      &::before {
+        /* Custom styles */
+      }
+
+      &::after {
+        /* Custom styles */
+      }
+
+      .glows {
+        /* Custom styles */
+
+        &::after,
+        &::before {
+          /* Custom styles */
+        }
+      }
+    }
+  }
+}
+</style>

package/app/pages/ui/content-container.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <ContentContainer tag="div" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-2 mbe-18">Content Container</h1>
+          <p class="page-body-normal-semibold">
+            Small screens:
+            <code class="page-body-normal">--content-max-width: auto;</code>
+          </p>
+          <p class="page-body-normal-semibold">
+            >= Laptop screens:
+            <code class="page-body-normal">--content-max-width: 1064px;</code>
+          </p>
+        </ContentContainer>
+
+        <ContentContainer tag="div" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2 mbe-18">Sample content</h2>
+          <p class="page-body-normal">
+            Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit
+            convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora. Platea accumsan interdum
+            ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit
+            nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in penatibus torquent tortor. Platea gravida nam;
+            egestas enim nostra ultricies.
+          </p>
+          <p class="page-body-normal">
+            Mi nibh quisque taciti porta curabitur nostra volutpat. Habitant sodales arcu habitasse mi duis conubia leo
+            lacinia. Montes torquent sodales adipiscing; proin semper feugiat morbi ullamcorper praesent. Arcu luctus
+            tempor quam ligula vestibulum sapien faucibus ridiculus. Cursus consequat ultricies consectetur class
+            suscipit quisque convallis eget? Dignissim mattis luctus enim habitant porta pretium litora. Parturient
+            montes imperdiet massa; sollicitudin varius hac aptent. Eleifend parturient mattis tellus nisi a montes.
+          </p>
+        </ContentContainer>
+
+        <ContentContainer tag="div" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2 mbe-18">Sample Column content</h2>
+
+          <TwoColumns>
+            <template #col1>
+              <h3 class="page-heading-3 mbe-12">Column 1</h3>
+              <p class="page-body-normal">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.
+                Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent
+                et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem
+                lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit
+                amet, consectetur adipiscing elit.
+              </p>
+            </template>
+            <template #col2>
+              <h3 class="page-heading-3 mbe-12">Column 2</h3>
+              <p class="page-body-normal">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.
+                Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent
+                et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem
+                lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit
+                amet, consectetur adipiscing elit.
+              </p>
+            </template>
+          </TwoColumns>
+        </ContentContainer>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "UI Layout Row",
+  meta: [{ name: "description", content: "Examples of UI Component Layout Row" }],
+  bodyAttrs: {
+    class: "content-container-page",
+  },
+});
+</script>
+
+<style lang="css">
+.content-container-page {
+  .two-column-layout-container {
+    .two-column-layout {
+      .col-1 {
+        outline: 1px solid green;
+      }
+
+      .col-2 {
+        outline: 1px solid green;
+      }
+
+      @container two-column-layout (width >= 1064px) {
+        .col-1 {
+          outline: 1px solid purple;
+        }
+
+        .col-2 {
+          outline: 1px solid purple;
+        }
+      }
+    }
+  }
+}
+
+.content-container-wrapper {
+  .content-container {
+    .content-container-inner {
+      outline: 1px solid orange;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,253 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow 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>
+        </LayoutRow>
+      </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

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-2">DisplayBanner</h1>
+        </LayoutRow>
+
+        <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>

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

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1">DisplayCard Component</h1>
+          <form class="mb-12">
+            <div>
+              <label for="variant" class="form-label mie-12">Variant:</label>
+              <select id="variant" v-model="displayCardVariant" 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>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="inset-content" :style-class-passthrough="['mbe-20']">
+          <DisplayCard :variant="displayCardVariant" :has-dividers="hasDividers" :no-outline="noOutline">
+            <template #header>
+              <h2 class="page-heading-2">DisplayCard Header</h2>
+            </template>
+            <template #default>
+              <h3 class="page-heading-3">DisplayCard Content</h3>
+              <p class="page-body-normal">This is default slot content for the DisplayCard 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">DisplayCard Footer</p>
+            </template>
+          </DisplayCard>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+})
+
+useHead({
+  title: "DisplayCard Component",
+  meta: [
+    {
+      name: "description",
+      content: "DisplayCard Component description content",
+    },
+  ],
+  bodyAttrs: {
+    class: "display-card-page",
+  },
+})
+
+const displayCardVariant = ref("solid")
+const hasDividers = ref(false)
+const noOutline = ref(false)
+</script>
+
+<style lang="css">
+.display-card-page {
+  form {
+    display: flex;
+    gap: 2rem;
+    flex-wrap: wrap;
+    margin-bottom: 2rem;
+  }
+  .display-card {
+  }
+}
+</style>