srcdev-nuxt-components 8.0.2 → 9.0.0

package/app/components/forms/input-label/tests/InputLabel.spec.ts

@@ -0,0 +1,431 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms";
+import InputLabel from "../InputLabel.vue";
+
+// Mock useStyleClassPassthrough composable
+vi.mock("#imports", () => ({
+  useStyleClassPassthrough: vi.fn((classes) => ({
+    elementClasses: { value: Array.isArray(classes) ? classes.join(" ") : classes || "" },
+  })),
+  useSlots: vi.fn(),
+}));
+
+describe("InputLabel", () => {
+  let wrapper: ReturnType<typeof mountSuspended>;
+
+  const createWrapper = async (props = {}, slots = {}) => {
+    const defaultProps = {
+      id: "test-input",
+      name: "testInput",
+      inputVariant: "normal" as InputUiVariant, // Set valid default with proper typing
+      ...props,
+    };
+
+    wrapper = await mountSuspended(InputLabel, {
+      props: defaultProps,
+      slots,
+    });
+
+    return wrapper;
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    wrapper?.unmount();
+  });
+
+  describe("Component Rendering", () => {
+    it("renders label element with correct for attribute", async () => {
+      await createWrapper({ id: "email-input" });
+
+      const label = wrapper.find("label");
+      expect(label.exists()).toBe(true);
+      expect(label.attributes("for")).toBe("email-input");
+      expect(label.classes()).toContain("input-label");
+    });
+
+    it("renders with textLabel slot", async () => {
+      await createWrapper(
+        {},
+        {
+          textLabel: "Email Address",
+        }
+      );
+
+      const label = wrapper.find("label");
+      expect(label.exists()).toBe(true);
+      expect(label.text()).toBe("Email Address");
+    });
+
+    it("renders with htmlLabel slot", async () => {
+      await createWrapper(
+        {},
+        {
+          htmlLabel: "<strong>Required:</strong> Email Address",
+        }
+      );
+
+      const label = wrapper.find("label");
+      expect(label.exists()).toBe(true);
+      expect(label.html()).toContain("<strong>Required:</strong>");
+      expect(label.html()).toContain("Email Address");
+    });
+
+    it("renders both slots when provided", async () => {
+      await createWrapper(
+        {},
+        {
+          htmlLabel: "<strong>Primary:</strong>",
+          textLabel: "Email Address",
+        }
+      );
+
+      const label = wrapper.find("label");
+      expect(label.exists()).toBe(true);
+      expect(label.html()).toContain("<strong>Primary:</strong>");
+      expect(label.text()).toContain("Email Address");
+    });
+
+    it("renders empty label when no slots provided", async () => {
+      await createWrapper();
+
+      const label = wrapper.find("label");
+      expect(label.exists()).toBe(true);
+      expect(label.text()).toBe("");
+    });
+  });
+
+  describe("Props Handling", () => {
+    it("applies styleClassPassthrough as string", async () => {
+      await createWrapper({
+        styleClassPassthrough: "custom-label-class",
+      });
+
+      const label = wrapper.find("label");
+      expect(label.classes()).toContain("custom-label-class");
+    });
+
+    it("applies styleClassPassthrough as array", async () => {
+      await createWrapper({
+        styleClassPassthrough: ["custom-class", "another-class"],
+      });
+
+      const label = wrapper.find("label");
+      expect(label.classes()).toContain("custom-class");
+      expect(label.classes()).toContain("another-class");
+    });
+
+    it("applies normal variant class", async () => {
+      await createWrapper({
+        inputVariant: "normal",
+      });
+
+      const label = wrapper.find("label");
+      expect(label.classes()).toContain("normal");
+    });
+
+    it("handles theme prop correctly", async () => {
+      await createWrapper({
+        theme: "success",
+      });
+
+      // Component should render successfully with valid theme
+      const label = wrapper.find("label");
+      expect(label.exists()).toBe(true);
+    });
+
+    it("handles fieldHasError prop", async () => {
+      await createWrapper({
+        fieldHasError: true,
+      });
+
+      // Component should render successfully with error state
+      const label = wrapper.find("label");
+      expect(label.exists()).toBe(true);
+    });
+  });
+
+  describe("Required Props", () => {
+    it("requires id prop for label association", async () => {
+      await createWrapper({
+        id: "required-id",
+        name: "test",
+      });
+
+      const label = wrapper.find("label");
+      expect(label.attributes("for")).toBe("required-id");
+    });
+
+    it("requires name prop", async () => {
+      await createWrapper({
+        id: "test-id",
+        name: "required-name",
+      });
+
+      // Component should render successfully with required name
+      const label = wrapper.find("label");
+      expect(label.exists()).toBe(true);
+    });
+
+    it("works with complex ID values", async () => {
+      await createWrapper({
+        id: "complex-id_with.dots-and_underscores123",
+      });
+
+      const label = wrapper.find("label");
+      expect(label.attributes("for")).toBe("complex-id_with.dots-and_underscores123");
+    });
+  });
+
+  describe("Default Props", () => {
+    it("applies default theme value", async () => {
+      await createWrapper();
+
+      // Component should work with default theme 'primary'
+      const label = wrapper.find("label");
+      expect(label.exists()).toBe(true);
+    });
+
+    it("applies default InputUiVariant value", async () => {
+      await createWrapper();
+
+      // Component should work with default InputUiVariant 'normal'
+      const label = wrapper.find("label");
+      expect(label.classes()).toContain("normal");
+    });
+
+    it("applies default fieldHasError value", async () => {
+      await createWrapper();
+
+      // Component should work with default fieldHasError false
+      const label = wrapper.find("label");
+      expect(label.exists()).toBe(true);
+    });
+
+    it("applies default styleClassPassthrough value", async () => {
+      await createWrapper();
+
+      const label = wrapper.find("label");
+      expect(label.exists()).toBe(true);
+      // Should have base classes but no custom ones
+      expect(label.classes()).toEqual(["input-label", "normal"]);
+    });
+  });
+
+  describe("Accessibility", () => {
+    it("provides proper label association with for attribute", async () => {
+      await createWrapper(
+        {
+          id: "username-field",
+        },
+        {
+          textLabel: "Username",
+        }
+      );
+
+      const label = wrapper.find("label");
+      expect(label.attributes("for")).toBe("username-field");
+      expect(label.text()).toBe("Username");
+    });
+
+    it("supports rich HTML content for complex labels", async () => {
+      await createWrapper(
+        {},
+        {
+          htmlLabel: `
+          <span>Password</span>
+          <span class="required-indicator" aria-label="required">*</span>
+          <small>(must be 8+ characters)</small>
+        `,
+        }
+      );
+
+      const label = wrapper.find("label");
+      expect(label.html()).toContain("<span>Password</span>");
+      expect(label.html()).toContain("required-indicator");
+      expect(label.html()).toContain("<small>");
+    });
+
+    it("maintains semantic HTML structure", async () => {
+      await createWrapper(
+        {
+          id: "semantic-input",
+        },
+        {
+          textLabel: "Semantic Label",
+        }
+      );
+
+      const label = wrapper.find("label");
+      expect(label.element.tagName).toBe("LABEL");
+      expect(label.attributes("for")).toBe("semantic-input");
+    });
+  });
+
+  describe("Slot Behavior", () => {
+    it("renders htmlLabel slot first when both slots provided", async () => {
+      await createWrapper(
+        {},
+        {
+          htmlLabel: "<em>HTML content</em>",
+          textLabel: "Text content",
+        }
+      );
+
+      const label = wrapper.find("label");
+      const html = label.html();
+
+      // HTML slot should appear before text slot in DOM
+      const htmlIndex = html.indexOf("<em>HTML content</em>");
+      const textIndex = html.indexOf("Text content");
+      expect(htmlIndex).toBeGreaterThan(-1);
+      expect(textIndex).toBeGreaterThan(-1);
+      expect(htmlIndex).toBeLessThan(textIndex);
+    });
+
+    it("handles only htmlLabel slot", async () => {
+      await createWrapper(
+        {},
+        {
+          htmlLabel: "<strong>Only HTML Label</strong>",
+        }
+      );
+
+      const label = wrapper.find("label");
+      expect(label.html()).toContain("<strong>Only HTML Label</strong>");
+      expect(label.text()).toBe("Only HTML Label");
+    });
+
+    it("handles only textLabel slot", async () => {
+      await createWrapper(
+        {},
+        {
+          textLabel: "Only Text Label",
+        }
+      );
+
+      const label = wrapper.find("label");
+      expect(label.text()).toBe("Only Text Label");
+      expect(label.html()).not.toContain("<strong>");
+    });
+  });
+
+  describe("CSS Classes", () => {
+    it("always includes base input-label class", async () => {
+      await createWrapper();
+
+      const label = wrapper.find("label");
+      expect(label.classes()).toContain("input-label");
+    });
+
+    it("handles empty styleClassPassthrough", async () => {
+      await createWrapper({
+        styleClassPassthrough: [],
+      });
+
+      const label = wrapper.find("label");
+      expect(label.classes()).toEqual(["input-label", "normal"]);
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("handles empty slot content gracefully", async () => {
+      await createWrapper(
+        {},
+        {
+          textLabel: "",
+        }
+      );
+
+      const label = wrapper.find("label");
+      expect(label.exists()).toBe(true);
+      expect(label.text()).toBe("");
+    });
+
+    it("handles whitespace-only slot content", async () => {
+      await createWrapper(
+        {},
+        {
+          textLabel: "   ",
+        }
+      );
+
+      const label = wrapper.find("label");
+      expect(label.exists()).toBe(true);
+      expect(label.text().trim()).toBe("");
+    });
+
+    it("handles special characters in labels", async () => {
+      await createWrapper(
+        {},
+        {
+          textLabel: "Label with & < > \" ' characters",
+        }
+      );
+
+      const label = wrapper.find("label");
+      expect(label.text()).toBe("Label with & < > \" ' characters");
+    });
+
+    it("handles multiline label content", async () => {
+      await createWrapper(
+        {},
+        {
+          textLabel: `
+          Multi-line
+          Label Content
+        `,
+        }
+      );
+
+      const label = wrapper.find("label");
+      expect(label.text()).toContain("Multi-line");
+      expect(label.text()).toContain("Label Content");
+    });
+
+    it("works with all valid theme values", async () => {
+      // Use FormUiTheme type for type-safe theme values
+      const themes = ["primary", "secondary", "tertiary", "ghost", "error", "success", "warning"] as FormUiTheme[];
+      for (const theme of themes) {
+        const testWrapper = await createWrapper({ theme });
+        const label = testWrapper.find("label");
+        expect(label.exists()).toBe(true);
+        testWrapper.unmount();
+      }
+    });
+  });
+
+  describe("Label-Input Association", () => {
+    it("creates proper association between label and input", async () => {
+      await createWrapper(
+        {
+          id: "email-input-field",
+        },
+        {
+          textLabel: "Email Address",
+        }
+      );
+
+      const label = wrapper.find("label");
+      expect(label.attributes("for")).toBe("email-input-field");
+      // This ensures clicking the label will focus the associated input
+    });
+
+    it("handles dynamic ID changes", async () => {
+      await createWrapper({
+        id: "initial-id",
+      });
+
+      const label = wrapper.find("label");
+      expect(label.attributes("for")).toBe("initial-id");
+
+      // Update props to simulate ID change
+      await wrapper.setProps({ id: "updated-id" });
+      expect(label.attributes("for")).toBe("updated-id");
+    });
+  });
+});

package/app/components/forms/input-number/InputNumberCore.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="input-number-wrapper" :data-theme="theme" :data-invalid="fieldHasError ? '' : null">
+    <div v-if="slots.left" class="slot left">
+      <slot name="left"></slot>
+    </div>
+
+    <div class="input-number-container">
+      <input
+        :id
+        ref="inputField"
+        v-model="modelValue"
+        type="number"
+        :name
+        :required
+        :min
+        :max
+        :step
+        :class="[elementClasses]"
+        inputmode="numeric"
+        pattern="[0-9]+"
+        :aria-describedby
+      />
+    </div>
+    <div v-if="slots.right" class="slot right">
+      <slot name="right"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  id: string;
+  name: string;
+  min: number;
+  max: number;
+  step?: number;
+  placeholder?: string;
+  required?: boolean;
+  theme?: "default" | "success" | "error" | "warning";
+  fieldHasError?: boolean;
+  styleClassPassthrough?: string | string[];
+  ariaDescribedby?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  step: 1,
+  placeholder: "",
+  required: false,
+  theme: "default",
+  fieldHasError: false,
+  styleClassPassthrough: () => [],
+  ariaDescribedby: "",
+});
+
+const slots = useSlots();
+
+const modelValue = defineModel<number | readonly number[]>();
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const minLength = computed(() => `${props.max.toString().length + 1}em`);
+</script>
+
+<style lang="css">
+@layer components {
+.input-number-wrapper {
+  --_focus-box-shadow: var(--box-shadow-off);
+  --_min-width: v-bind(minLength);
+
+  display: flex;
+  align-items: center;
+
+  width: fit-content;
+
+  background-color: var(--theme-button-surface);
+  border-radius: var(--form-element-border-width);
+  border: var(--form-element-border-width) solid var(--theme-input-border);
+  outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+  box-shadow: var(--_focus-box-shadow);
+
+  .slot {
+    display: inline-block;
+
+    .icon {
+      font-weight: 900;
+    }
+  }
+
+  &.has-left-slot {
+    .left-slot {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &.has-right-slot {
+    .right-slot {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .input-number-core {
+    touch-action: manipulation;
+    background-color: transparent;
+    border: none;
+    outline: none;
+    box-shadow: none;
+
+    background-color: var(--theme-input-surface);
+    color: var(--theme-input-text-color-normal);
+    font-family: var(--font-family);
+    font-size: var(--input-font-size);
+    line-height: var(--input-element-line-height);
+
+    padding-inline: var(--form-textarea-padding-inline);
+    padding-block-start: var(--form-textarea-padding-block-start);
+    padding-block-end: var(--form-textarea-padding-block-end);
+    text-align: center;
+    min-width: var(--_min-width);
+
+    &:focus-visible {
+      --_focus-box-shadow: var(--box-shadow-on);
+    }
+
+    &::placeholder,
+    &::-webkit-input-placeholder {
+      font-family: var(--font-family);
+      font-size: var(--font-size);
+      font-style: italic;
+      font-weight: 400;
+    }
+  }
+
+  &:has(.has-left-button),
+  &:has(.has-right-button) {
+    .slot {
+      .input-button-core {
+        border: initial;
+        border-radius: 0;
+        outline: initial;
+        box-shadow: unset;
+      }
+    }
+
+    .left-slot {
+      margin-inline-end: 0;
+      border-right: 2px solid var(--theme-button-surface-hover);
+    }
+
+    .right-slot {
+      margin-inline-end: 0;
+      border-left: 2px solid var(--theme-button-surface-hover);
+    }
+  }
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+}
+</style>