srcdev-nuxt-components 9.1.43 → 9.1.45

package/app/components/02.molecules/display-chip/DisplayChip.vue

@@ -0,0 +1,189 @@
+<template>
+  <component :is="tag" class="display-chip-core" :class="[shape, elementClasses]" :style="chipStyles">
+    <slot name="default"></slot>
+    <Icon v-if="config?.icon" :name="config.icon" class="chip-icon" />
+    <span v-if="config?.label" class="chip-label" :class="`length-${config.label.length}`">{{ validatedLabel }}</span>
+  </component>
+</template>
+
+<script setup lang="ts">
+import type { DisplayChipConfig } from "~/types/components";
+
+interface Props {
+  tag?: "div" | "span";
+  shape?: "circle" | "square";
+  config?: DisplayChipConfig;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "span",
+  shape: "circle",
+  config: () => ({
+    size: "12px",
+    maskWidth: "4px",
+    offset: "0px",
+    angle: "90deg",
+    icon: undefined,
+    label: undefined,
+  }),
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+
+const validatedLabel = computed(() => {
+  if (!props.config?.label) return props.config?.label;
+  if (props.config.label.length > 3) {
+    console.warn(
+      `DisplayChip: label "${
+        props.config.label
+      }" exceeds maximum length of 3 characters. Truncating to "${props.config.label.slice(0, 3)}"`
+    );
+    return props.config.label.slice(0, 3);
+  }
+  return props.config.label;
+});
+
+const chipStyles = computed(() => ({
+  "--chip-size": props.config?.size,
+  "--chip-mask-width": props.config?.maskWidth,
+  "--chip-offset": props.config?.offset,
+  "--chip-angle": props.config?.angle,
+}));
+</script>
+
+<style lang="css">
+@layer components {
+  .display-chip-core {
+    --computed-mask-diameter: calc(var(--chip-size) + (var(--chip-mask-width) * 2));
+
+    &.circle {
+      --computed-chip-offset: calc((100% / 2) + var(--chip-offset));
+      --computed-position-x: calc(var(--computed-chip-offset) * cos(var(--chip-angle) - 90deg) + (100% / 2));
+      --computed-position-y: calc(var(--computed-chip-offset) * sin(var(--chip-angle) - 90deg) + (100% / 2));
+    }
+
+    &.square {
+      --circle-x: calc(50% + (50% + var(--chip-offset) + (var(--chip-size) / 2)) * cos(var(--chip-angle) - 90deg));
+      --circle-y: calc(50% + (50% + var(--chip-offset) + (var(--chip-size) / 2)) * sin(var(--chip-angle) - 90deg));
+      --computed-position-x: clamp(calc(var(--chip-offset) * -1), var(--circle-x), calc(100% + var(--chip-offset)));
+      --computed-position-y: clamp(calc(var(--chip-offset) * -1), var(--circle-y), calc(100% + var(--chip-offset)));
+    }
+
+    /* colors */
+
+    --color-offline: slategrey;
+    --color-online: rgb(0, 255, 135);
+    --color-idle: rgb(255, 185, 51);
+    --color-dnd: rgb(255, 40, 80);
+
+    position: relative;
+    display: inline-block;
+
+    &::after {
+      content: "";
+      aspect-ratio: 1;
+      background: var(--color-offline);
+      position: absolute;
+      width: var(--chip-size);
+      border-radius: 100%;
+      z-index: 1;
+    }
+    .chip-icon {
+      position: absolute;
+      width: var(--chip-size);
+      height: var(--chip-size);
+      border-radius: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: black;
+      z-index: 2;
+    }
+
+    .chip-label {
+      --_font-size-adjust: 0.7;
+      position: absolute;
+      width: var(--chip-size);
+      height: var(--chip-size);
+      border-radius: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: black;
+      z-index: 2;
+      font-size: calc(var(--chip-size) * var(--_font-size-adjust));
+      line-height: 1;
+      letter-spacing: -0.05rem;
+      user-select: none;
+
+      &.length-2 {
+        --_font-size-adjust: 0.6;
+      }
+
+      &.length-3 {
+        --_font-size-adjust: 0.5;
+      }
+    }
+
+    & > * {
+      /*
+    create the cutout mask around the image,
+    it's just a radial gradient positioned at the same place as the
+    psuedo-element ::after
+    */
+
+      &:not(.chip-icon, .chip-label) {
+        mask-image: radial-gradient(
+          var(--computed-mask-diameter) var(--computed-mask-diameter) at var(--computed-position-x)
+            var(--computed-position-y),
+          transparent calc(50% - 0.5px),
+          black calc(50% + 0.5px)
+        );
+      }
+    }
+
+    &.circle {
+      &::after,
+      .chip-icon,
+      .chip-label {
+        top: calc(var(--computed-position-y) - (var(--chip-size) / 2));
+        left: calc(var(--computed-position-x) - (var(--chip-size) / 2));
+      }
+    }
+
+    &.square {
+      &::after,
+      .chip-icon,
+      .chip-label {
+        top: calc(var(--computed-position-y) - (var(--chip-size) / 2));
+        left: calc(var(--computed-position-x) - (var(--chip-size) / 2));
+      }
+    }
+
+    &.online {
+      &::after {
+        background-color: var(--color-online);
+      }
+    }
+    &.idle {
+      &::after {
+        background-color: var(--color-idle);
+      }
+    }
+    &.dnd {
+      &::after {
+        background-color: var(--color-dnd);
+      }
+    }
+  }
+}
+</style>

package/app/components/{display-chip → 02.molecules/display-chip}/stories/DisplayChip.stories.ts

@@ -1,6 +1,7 @@
+import { computed } from "vue";
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import StorybookComponent from "../DisplayChip.vue";
-import type { DisplayChipConfig } from "../../../types/components";
+import type { DisplayChipConfig } from "~/types/components";
 
 // Custom interface for story args
 interface ChipStoryArgs {
@@ -19,7 +20,7 @@ interface ChipStoryArgs {
 }
 
 export default {
-  title: "Components/UI/DisplayChip",
+  title: "Molecules/DisplayChip",
   component: StorybookComponent,
   argTypes: {
     // Basic Configuration
@@ -129,7 +130,7 @@ export default {
     label: "",
     status: "offline",
     useSlot: true,
-    slotContent: "Avatar content",
+    slotContent: "SRC",
     styleClassPassthrough: [],
   },
 } as Meta<typeof StorybookComponent>;
@@ -137,30 +138,43 @@ export default {
 const Template: StoryFn<ChipStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
-    const chipConfig: DisplayChipConfig = {
-      size: `${args.chipSize}px`,
-      maskWidth: `${args.chipMaskWidth}px`,
-      offset: `${args.chipOffset}px`,
-      angle: `${args.chipAngle}deg`,
-      icon: args.icon || undefined,
-      label: args.label || undefined,
-    };
+    const chipConfig = computed(
+      (): DisplayChipConfig => ({
+        size: `${args.chipSize}px`,
+        maskWidth: `${args.chipMaskWidth}px`,
+        offset: `${args.chipOffset}px`,
+        angle: `${args.chipAngle}deg`,
+        icon: args.icon || undefined,
+        label: args.label || undefined,
+      })
+    );
 
-    const classes = [...(args.styleClassPassthrough || []), args.status];
+    const classes = computed(() => [...(args.styleClassPassthrough || []), args.status]);
 
     return { args, chipConfig, classes };
   },
   template: `
-    <div style="padding: 40px; display: flex; align-items: center; justify-content: center; min-height: 200px;">
+    <div style="display: flex; align-items: center; justify-content: center; height: 100vh;">
       <StorybookComponent
         :tag="args.tag"
         :shape="args.shape"
         :config="chipConfig"
         :style-class-passthrough="classes"
-        style="width: 100px; height: 100px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500;"
       >
         <template v-if="args.useSlot" #default>
-          {{ args.slotContent }}
+          <div :style="{
+            width: '50px',
+            height: '50px',
+            background: '#64748b',
+            borderRadius: args.shape === 'circle' ? '50%' : '4px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: '#f8fafc',
+            fontWeight: '600',
+            fontSize: '1.3rem',
+            fontFamily: 'sans-serif',
+          }">{{ args.slotContent }}</div>
         </template>
       </StorybookComponent>
     </div>
@@ -179,7 +193,6 @@ export const WithIcon = Template.bind({});
 WithIcon.args = {
   status: "online",
   icon: "mdi:check",
-  slotContent: "Icon Chip",
 };
 
 // Different Statuses
@@ -257,7 +270,6 @@ SquareShape.args = {
   shape: "square",
   status: "online",
   label: "□",
-  slotContent: "Square Parent",
 };
 
 // With Offset
@@ -266,7 +278,6 @@ WithOffset.args = {
   status: "online",
   chipOffset: 10,
   label: "10",
-  slotContent: "Offset Example",
 };
 
 // Multiple Chips Demo
@@ -276,61 +287,34 @@ const MultipleChipsTemplate: StoryFn<ChipStoryArgs> = (args) => ({
     return { args };
   },
   template: `
-    <div style="padding: 40px; display: flex; gap: 40px; align-items: center; justify-content: center; flex-wrap: wrap;">
+    <div style="display: flex; gap: 40px; align-items: center; justify-content: center; height: 100vh; flex-wrap: wrap;">
       <StorybookComponent
-        :config="{
-          size: '12px',
-          maskWidth: '4px',
-          offset: '0px',
-          angle: '45deg',
-          label: '5'
-        }"
+        :config="{ size: '12px', maskWidth: '4px', offset: '0px', angle: '45deg', label: '5' }"
         :style-class-passthrough="['online']"
-        style="width: 80px; height: 80px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white;"
       >
-        Online
+        <div style="width: 50px; height: 50px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #f8fafc; font-weight: 600; font-size: 1.3rem; font-family: sans-serif;">SRC</div>
       </StorybookComponent>
 
       <StorybookComponent
-        :config="{
-          size: '10px',
-          maskWidth: '3px',
-          offset: '2px',
-          angle: '315deg',
-          icon: 'mdi:pause'
-        }"
+        :config="{ size: '10px', maskWidth: '3px', offset: '2px', angle: '315deg', icon: 'mdi:pause' }"
         :style-class-passthrough="['idle']"
-        style="width: 80px; height: 80px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white;"
       >
-        Idle
+        <div style="width: 50px; height: 50px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #f8fafc; font-weight: 600; font-size: 1.3rem; font-family: sans-serif;">SRC</div>
       </StorybookComponent>
 
       <StorybookComponent
         shape="square"
-        :config="{
-          size: '14px',
-          maskWidth: '2px',
-          offset: '-5px',
-          angle: '135deg',
-          label: 'DND'
-        }"
+        :config="{ size: '14px', maskWidth: '2px', offset: '-5px', angle: '135deg', label: 'DND' }"
         :style-class-passthrough="['dnd']"
-        style="width: 80px; height: 80px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white;"
       >
-        DND
+        <div style="width: 50px; height: 50px; background: #64748b; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #f8fafc; font-weight: 600; font-size: 1.3rem; font-family: sans-serif;">SRC</div>
       </StorybookComponent>
 
       <StorybookComponent
-        :config="{
-          size: '16px',
-          maskWidth: '6px',
-          offset: '8px',
-          angle: '90deg'
-        }"
+        :config="{ size: '16px', maskWidth: '6px', offset: '8px', angle: '90deg' }"
         :style-class-passthrough="['offline']"
-        style="width: 80px; height: 80px; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: white;"
       >
-        Offline
+        <div style="width: 50px; height: 50px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #f8fafc; font-weight: 600; font-size: 1.3rem; font-family: sans-serif;">SRC</div>
       </StorybookComponent>
     </div>
   `,

package/app/components/02.molecules/display-chip/tests/DisplayChip.spec.ts

@@ -0,0 +1,191 @@
+import { describe, it, expect, vi } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import DisplayChip from "../DisplayChip.vue";
+
+describe("DisplayChip", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(DisplayChip);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure (default)", async () => {
+    const wrapper = await mountSuspended(DisplayChip);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (with label)", async () => {
+    const wrapper = await mountSuspended(DisplayChip, {
+      props: { config: { size: "12px", maskWidth: "4px", offset: "0px", angle: "90deg", label: "5" } },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (with icon)", async () => {
+    const wrapper = await mountSuspended(DisplayChip, {
+      props: { config: { size: "12px", maskWidth: "4px", offset: "0px", angle: "90deg", icon: "mdi:check" } },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (square + styleClassPassthrough)", async () => {
+    const wrapper = await mountSuspended(DisplayChip, {
+      props: { shape: "square", styleClassPassthrough: ["online"] },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("renders as <span> by default", async () => {
+    const wrapper = await mountSuspended(DisplayChip);
+    expect(wrapper.element.tagName).toBe("SPAN");
+  });
+
+  it("renders as <div> when tag='div'", async () => {
+    const wrapper = await mountSuspended(DisplayChip, { props: { tag: "div" } });
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  // ─── Base class ───────────────────────────────────────────────────────────
+
+  it("always has the display-chip-core class", async () => {
+    const wrapper = await mountSuspended(DisplayChip);
+    expect(wrapper.classes()).toContain("display-chip-core");
+  });
+
+  // ─── Shape ────────────────────────────────────────────────────────────────
+
+  it("applies circle class by default", async () => {
+    const wrapper = await mountSuspended(DisplayChip);
+    expect(wrapper.classes()).toContain("circle");
+  });
+
+  it("applies square class when shape='square'", async () => {
+    const wrapper = await mountSuspended(DisplayChip, { props: { shape: "square" } });
+    expect(wrapper.classes()).toContain("square");
+    expect(wrapper.classes()).not.toContain("circle");
+  });
+
+  // ─── CSS custom properties ────────────────────────────────────────────────
+
+  it("sets CSS custom properties from config", async () => {
+    const wrapper = await mountSuspended(DisplayChip, {
+      props: {
+        config: { size: "16px", maskWidth: "3px", offset: "4px", angle: "45deg" },
+      },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--chip-size")).toBe("16px");
+    expect(style.getPropertyValue("--chip-mask-width")).toBe("3px");
+    expect(style.getPropertyValue("--chip-offset")).toBe("4px");
+    expect(style.getPropertyValue("--chip-angle")).toBe("45deg");
+  });
+
+  it("sets default CSS custom properties when no config is provided", async () => {
+    const wrapper = await mountSuspended(DisplayChip);
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--chip-size")).toBe("12px");
+    expect(style.getPropertyValue("--chip-mask-width")).toBe("4px");
+    expect(style.getPropertyValue("--chip-offset")).toBe("0px");
+    expect(style.getPropertyValue("--chip-angle")).toBe("90deg");
+  });
+
+  // ─── Label ────────────────────────────────────────────────────────────────
+
+  it("does not render .chip-label when config has no label", async () => {
+    const wrapper = await mountSuspended(DisplayChip);
+    expect(wrapper.find(".chip-label").exists()).toBe(false);
+  });
+
+  it("renders .chip-label when config.label is set", async () => {
+    const wrapper = await mountSuspended(DisplayChip, {
+      props: { config: { size: "12px", maskWidth: "4px", offset: "0px", angle: "90deg", label: "5" } },
+    });
+    expect(wrapper.find(".chip-label").exists()).toBe(true);
+    expect(wrapper.find(".chip-label").text()).toBe("5");
+  });
+
+  it.each([
+    ["A", "length-1"],
+    ["+2", "length-2"],
+    ["DND", "length-3"],
+  ])("applies length class for label '%s'", async (label, expectedClass) => {
+    const wrapper = await mountSuspended(DisplayChip, {
+      props: { config: { size: "12px", maskWidth: "4px", offset: "0px", angle: "90deg", label } },
+    });
+    expect(wrapper.find(".chip-label").classes()).toContain(expectedClass);
+  });
+
+  it("truncates label to 3 characters when label exceeds maximum length", async () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const wrapper = await mountSuspended(DisplayChip, {
+      props: { config: { size: "12px", maskWidth: "4px", offset: "0px", angle: "90deg", label: "ABCD" } },
+    });
+    expect(wrapper.find(".chip-label").text()).toBe("ABC");
+    warnSpy.mockRestore();
+  });
+
+  it("emits a console warning when label exceeds 3 characters", async () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    await mountSuspended(DisplayChip, {
+      props: { config: { size: "12px", maskWidth: "4px", offset: "0px", angle: "90deg", label: "ABCD" } },
+    });
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("exceeds maximum length of 3 characters"));
+    warnSpy.mockRestore();
+  });
+
+  // ─── Icon ─────────────────────────────────────────────────────────────────
+
+  it("does not render .chip-icon when config has no icon", async () => {
+    const wrapper = await mountSuspended(DisplayChip);
+    expect(wrapper.find(".chip-icon").exists()).toBe(false);
+  });
+
+  it("renders .chip-icon when config.icon is set", async () => {
+    const wrapper = await mountSuspended(DisplayChip, {
+      props: { config: { size: "12px", maskWidth: "4px", offset: "0px", angle: "90deg", icon: "mdi:check" } },
+    });
+    expect(wrapper.find(".chip-icon").exists()).toBe(true);
+  });
+
+  // ─── Slot ─────────────────────────────────────────────────────────────────
+
+  it("renders default slot content", async () => {
+    const wrapper = await mountSuspended(DisplayChip, {
+      slots: { default: "<div class='avatar'>SRC</div>" },
+    });
+    expect(wrapper.find(".avatar").exists()).toBe(true);
+    expect(wrapper.find(".avatar").text()).toBe("SRC");
+  });
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(DisplayChip, {
+      props: { styleClassPassthrough: "online" },
+    });
+    expect(wrapper.classes()).toContain("online");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(DisplayChip, {
+      props: { styleClassPassthrough: ["online", "featured"] },
+    });
+    expect(wrapper.classes()).toContain("online");
+    expect(wrapper.classes()).toContain("featured");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(DisplayChip, {
+      props: { styleClassPassthrough: ["online"] },
+    });
+    expect(wrapper.classes()).toContain("online");
+    await wrapper.setProps({ styleClassPassthrough: ["idle"] });
+    expect(wrapper.classes()).not.toContain("online");
+    expect(wrapper.classes()).toContain("idle");
+  });
+});

package/app/components/02.molecules/display-chip/tests/__snapshots__/DisplayChip.spec.ts.snap

@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DisplayChip > renders correct HTML structure (default) 1`] = `"<span class="display-chip-core circle" style="--chip-size: 12px; --chip-mask-width: 4px; --chip-offset: 0px; --chip-angle: 90deg;"><!--v-if--><!--v-if--></span>"`;
+
+exports[`DisplayChip > renders correct HTML structure (square + styleClassPassthrough) 1`] = `"<span class="display-chip-core square online" style="--chip-size: 12px; --chip-mask-width: 4px; --chip-offset: 0px; --chip-angle: 90deg;"><!--v-if--><!--v-if--></span>"`;
+
+exports[`DisplayChip > renders correct HTML structure (with icon) 1`] = `
+"<span class="display-chip-core circle" style="--chip-size: 12px; --chip-mask-width: 4px; --chip-offset: 0px; --chip-angle: 90deg;"><span class="iconify i-mdi:check chip-icon" aria-hidden="true"></span>
+<!--v-if--></span>"
+`;
+
+exports[`DisplayChip > renders correct HTML structure (with label) 1`] = `"<span class="display-chip-core circle" style="--chip-size: 12px; --chip-mask-width: 4px; --chip-offset: 0px; --chip-angle: 90deg;"><!--v-if--><span class="chip-label length-1">5</span></span>"`;

package/app/layouts/default.vue

@@ -89,6 +89,7 @@ const responsiveNavLinks = {
         { name: "Clipped Panels", path: "/ui/clipped-panels" },
         { name: "Display Chip", path: "/ui/display-chip" },
         { name: "Display Avatar", path: "/ui/display-avatar" },
+        { name: "Display Pill", path: "/ui/display-pill" },
         { name: "Qr Codes", path: "/ui/qr-code/display" },
       ],
     },