srcdev-nuxt-components 8.0.3 → 9.0.1

package/app/components/forms/input-button/tests/InputButtonCore.spec.ts

@@ -0,0 +1,269 @@
+// InputButtonCore.test.ts
+import { describe, it, expect, afterEach } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import InputButtonCore from "../InputButtonCore.vue";
+
+// --- Types ---
+interface InputButtonCoreInstance {
+  hasLeftSlot: boolean;
+  hasRightSlot: boolean;
+  hasIconOnlySlot: boolean;
+  buttonClasses: string[];
+}
+
+// --- Helpers ---
+const createWrapper = async (props: Record<string, unknown> = {}, slots: Record<string, string> = {}) => {
+  return mountSuspended(InputButtonCore, {
+    props: { buttonText: "Click me", ...props },
+    slots,
+  });
+};
+
+describe("InputButtonCore", () => {
+  let wrapper: Awaited<ReturnType<typeof createWrapper>>;
+
+  afterEach(() => {
+    wrapper?.unmount();
+  });
+
+  // -------------------------
+  // Snapshots
+  // -------------------------
+  describe("Snapshots", () => {
+    it("primary (default)", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it("secondary variant", async () => {
+      wrapper = await createWrapper({ variant: "secondary" });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it("tertiary variant", async () => {
+      wrapper = await createWrapper({ variant: "tertiary" });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it("pill", async () => {
+      wrapper = await createWrapper({ isPill: true });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it("pending state", async () => {
+      wrapper = await createWrapper({ isPending: true, hasPendingEffect: true });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it("readonly", async () => {
+      wrapper = await createWrapper({ readonly: true });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it("with left and right slots", async () => {
+      wrapper = await createWrapper(
+        {},
+        {
+          left: '<span data-testid="left-icon">←</span>',
+          right: '<span data-testid="right-icon">→</span>',
+        }
+      );
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it("icon-only slot", async () => {
+      wrapper = await createWrapper({}, { iconOnly: '<span data-testid="icon-only">⚡</span>' });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+  });
+
+  // -------------------------
+  // Structure & Rendering
+  // -------------------------
+  describe("Rendering", () => {
+    it("renders a button with correct base classes and testid", async () => {
+      wrapper = await createWrapper();
+      const button = wrapper.find("button");
+      expect(button.exists()).toBe(true);
+      expect(button.classes()).toContain("input-button-core");
+      expect(button.attributes("data-testid")).toBe("input-button-core");
+    });
+
+    it("renders button text", async () => {
+      wrapper = await createWrapper({ buttonText: "Hello" });
+      expect(wrapper.find(".button-text").text()).toBe("Hello");
+    });
+
+    it("handles empty buttonText gracefully", async () => {
+      wrapper = await createWrapper({ buttonText: "" });
+      const buttonText = wrapper.find(".button-text");
+      expect(buttonText.exists()).toBe(true);
+      expect(buttonText.text()).toBe("");
+    });
+  });
+
+  // -------------------------
+  // Props
+  // -------------------------
+  describe("Props", () => {
+    it("applies variant class", async () => {
+      for (const variant of ["primary", "secondary", "tertiary"] as const) {
+        const w = await mountSuspended(InputButtonCore, {
+          props: { buttonText: "Test", variant },
+        });
+        expect(w.find("button").classes()).toContain(variant);
+        w.unmount();
+      }
+    });
+
+    it("applies pill class when isPill is true", async () => {
+      wrapper = await createWrapper({ isPill: true });
+      expect(wrapper.find("button").classes()).toContain("pill");
+    });
+
+    it("does not apply pill class by default", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find("button").classes()).not.toContain("pill");
+    });
+
+    it("applies is-pending and pending-effect classes", async () => {
+      wrapper = await createWrapper({ isPending: true, hasPendingEffect: true });
+      const classes = wrapper.find("button").classes();
+      expect(classes).toContain("is-pending");
+      expect(classes).toContain("pending-effect");
+    });
+
+    it("applies correct type attribute", async () => {
+      for (const type of ["button", "submit", "reset"] as const) {
+        const w = await mountSuspended(InputButtonCore, {
+          props: { buttonText: "Test", type },
+        });
+        expect(w.find("button").attributes("type")).toBe(type);
+        w.unmount();
+      }
+    });
+
+    it("applies theme as data-theme attribute", async () => {
+      wrapper = await createWrapper({ theme: "secondary" });
+      expect(wrapper.find("button").attributes("data-theme")).toBe("secondary");
+    });
+
+    it("passes styleClassPassthrough to the button", async () => {
+      wrapper = await createWrapper({ styleClassPassthrough: "custom-class" });
+      expect(wrapper.find("button").classes()).toContain("custom-class");
+    });
+
+    it("passes array styleClassPassthrough to the button", async () => {
+      wrapper = await createWrapper({
+        styleClassPassthrough: ["custom-class", "another-class"],
+      });
+      const classes = wrapper.find("button").classes();
+      expect(classes).toContain("custom-class");
+      expect(classes).toContain("another-class");
+    });
+  });
+
+  // -------------------------
+  // Accessibility
+  // -------------------------
+  describe("Accessibility", () => {
+    it("sets aria-disabled to false by default", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find("button").attributes("aria-disabled")).toBe("false");
+    });
+
+    it("sets aria-disabled and readonly attr when readonly", async () => {
+      wrapper = await createWrapper({ readonly: true });
+      const button = wrapper.find("button");
+      expect(button.attributes("aria-disabled")).toBe("true");
+      expect(button.attributes("readonly")).toBeDefined();
+    });
+
+    it("keeps button text visible (not sr-only) by default", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".button-text").classes()).not.toContain("sr-only");
+    });
+
+    it("makes button text sr-only with iconOnly slot, but keeps it in DOM for screen readers", async () => {
+      wrapper = await createWrapper({ buttonText: "Save document" }, { iconOnly: "<span>💾</span>" });
+      const buttonText = wrapper.find(".button-text");
+      expect(buttonText.text()).toBe("Save document");
+      expect(buttonText.classes()).toContain("sr-only");
+    });
+  });
+
+  // -------------------------
+  // Slots
+  // -------------------------
+  describe("Slots", () => {
+    it("renders left slot", async () => {
+      wrapper = await createWrapper({}, { left: '<span data-testid="left-icon">←</span>' });
+      expect(wrapper.find(".btn-icon.left").exists()).toBe(true);
+      expect(wrapper.find('[data-testid="left-icon"]').exists()).toBe(true);
+    });
+
+    it("renders right slot", async () => {
+      wrapper = await createWrapper({}, { right: '<span data-testid="right-icon">→</span>' });
+      expect(wrapper.find(".btn-icon.right").exists()).toBe(true);
+      expect(wrapper.find('[data-testid="right-icon"]').exists()).toBe(true);
+    });
+
+    it("renders iconOnly slot and adds icon-only class to button", async () => {
+      wrapper = await createWrapper({}, { iconOnly: '<span data-testid="icon-only">⚡</span>' });
+      expect(wrapper.find(".btn-icon.icon-only").exists()).toBe(true);
+      expect(wrapper.find("button").classes()).toContain("icon-only");
+    });
+
+    it("iconOnly suppresses left and right slots", async () => {
+      wrapper = await createWrapper(
+        {},
+        {
+          left: '<span data-testid="left">←</span>',
+          right: '<span data-testid="right">→</span>',
+          iconOnly: '<span data-testid="icon">⚡</span>',
+        }
+      );
+      expect(wrapper.find(".btn-icon.left").exists()).toBe(false);
+      expect(wrapper.find(".btn-icon.right").exists()).toBe(false);
+      expect(wrapper.find(".btn-icon.icon-only").exists()).toBe(true);
+    });
+
+    it("renders left and right slots together when no iconOnly", async () => {
+      wrapper = await createWrapper(
+        {},
+        {
+          left: '<span data-testid="left">←</span>',
+          right: '<span data-testid="right">→</span>',
+        }
+      );
+      expect(wrapper.find(".btn-icon.left").exists()).toBe(true);
+      expect(wrapper.find(".btn-icon.right").exists()).toBe(true);
+      expect(wrapper.find(".btn-icon.icon-only").exists()).toBe(false);
+    });
+  });
+
+  // -------------------------
+  // Computed (vm internals)
+  // -------------------------
+  describe("Computed properties", () => {
+    it("hasLeftSlot is true when left slot provided without iconOnly", async () => {
+      wrapper = await createWrapper({}, { left: "<span>L</span>" });
+      expect((wrapper.vm as unknown as InputButtonCoreInstance).hasLeftSlot).toBe(true);
+    });
+
+    it("hasLeftSlot is false when iconOnly is also provided", async () => {
+      wrapper = await createWrapper({}, { left: "<span>L</span>", iconOnly: "<span>I</span>" });
+      expect((wrapper.vm as unknown as InputButtonCoreInstance).hasLeftSlot).toBe(false);
+    });
+
+    it("hasRightSlot is true when right slot provided without iconOnly", async () => {
+      wrapper = await createWrapper({}, { right: "<span>R</span>" });
+      expect((wrapper.vm as unknown as InputButtonCoreInstance).hasRightSlot).toBe(true);
+    });
+
+    it("hasIconOnlySlot is true when iconOnly slot provided", async () => {
+      wrapper = await createWrapper({}, { iconOnly: "<span>I</span>" });
+      expect((wrapper.vm as unknown as InputButtonCoreInstance).hasIconOnlySlot).toBe(true);
+    });
+  });
+});

package/app/components/forms/input-button/tests/__snapshots__/InputButtonCore.spec.ts.snap

@@ -0,0 +1,72 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`InputButtonCore > Snapshots > icon-only slot 1`] = `
+"<button type="button" aria-disabled="false" data-testid="input-button-core" data-theme="default" class="input-button-core primary icon-only">
+  <!--v-if-->
+  <!--v-if--><span class="button-text sr-only">Click me</span>
+  <!--v-if--><span class="btn-icon icon-only"><span data-testid="icon-only">⚡</span></span>
+</button>"
+`;
+
+exports[`InputButtonCore > Snapshots > pending state 1`] = `
+"<button type="button" aria-disabled="false" data-testid="input-button-core" data-theme="default" class="input-button-core primary pending-effect is-pending"><svg class="pending-container" data-theme="default">
+    <rect pathLength="100" stroke-linecap="round" class="pending-blur"></rect>
+    <rect pathLength="100" stroke-linecap="round" class="pending-line"></rect>
+  </svg>
+  <!--v-if--><span class="button-text">Click me</span>
+  <!--v-if-->
+  <!--v-if-->
+</button>"
+`;
+
+exports[`InputButtonCore > Snapshots > pill 1`] = `
+"<button type="button" aria-disabled="false" data-testid="input-button-core" data-theme="default" class="input-button-core primary pill">
+  <!--v-if-->
+  <!--v-if--><span class="button-text">Click me</span>
+  <!--v-if-->
+  <!--v-if-->
+</button>"
+`;
+
+exports[`InputButtonCore > Snapshots > primary (default) 1`] = `
+"<button type="button" aria-disabled="false" data-testid="input-button-core" data-theme="default" class="input-button-core primary">
+  <!--v-if-->
+  <!--v-if--><span class="button-text">Click me</span>
+  <!--v-if-->
+  <!--v-if-->
+</button>"
+`;
+
+exports[`InputButtonCore > Snapshots > readonly 1`] = `
+"<button type="button" readonly="" aria-disabled="true" data-testid="input-button-core" data-theme="default" class="input-button-core primary">
+  <!--v-if-->
+  <!--v-if--><span class="button-text">Click me</span>
+  <!--v-if-->
+  <!--v-if-->
+</button>"
+`;
+
+exports[`InputButtonCore > Snapshots > secondary variant 1`] = `
+"<button type="button" aria-disabled="false" data-testid="input-button-core" data-theme="default" class="input-button-core secondary">
+  <!--v-if-->
+  <!--v-if--><span class="button-text">Click me</span>
+  <!--v-if-->
+  <!--v-if-->
+</button>"
+`;
+
+exports[`InputButtonCore > Snapshots > tertiary variant 1`] = `
+"<button type="button" aria-disabled="false" data-testid="input-button-core" data-theme="default" class="input-button-core tertiary">
+  <!--v-if-->
+  <!--v-if--><span class="button-text">Click me</span>
+  <!--v-if-->
+  <!--v-if-->
+</button>"
+`;
+
+exports[`InputButtonCore > Snapshots > with left and right slots 1`] = `
+"<button type="button" aria-disabled="false" data-testid="input-button-core" data-theme="default" class="input-button-core primary">
+  <!--v-if--><span class="btn-icon left"><span data-testid="left-icon">←</span></span><span class="button-text">Click me</span><span class="btn-icon right"><span data-testid="right-icon">→</span></span>
+  <!--v-if-->
+</button>"
+`;

package/app/components/forms/input-checkbox/MultipleCheckboxes.vue

@@ -0,0 +1,181 @@
+<template>
+  <FormFieldset
+    :id
+    :name
+    :legend
+    :field-has-error
+    :required
+    :data-testid
+    :style-class-passthrough="['multiple-checkboxes-fieldset', elementClasses]"
+  >
+    <template #content>
+      <InputDescription
+        :id
+        :description-id
+        :name
+        :field-has-error="fieldHasError"
+        :style-class-passthrough="['input-text-description']"
+      >
+        <template #descriptionHtml>
+          <slot name="descriptionHtml"></slot>
+        </template>
+        <template #descriptionText>
+          <slot name="descriptionText"></slot>
+        </template>
+      </InputDescription>
+      <div ref="itemsContainer" class="multiple-checkboxes-items" :class="[optionsLayout]">
+        <template v-for="item in fieldData.data" :key="item.id">
+          <InputCheckboxRadioButton
+            v-if="isButton"
+            :id="`${name}-${item.value}`"
+            v-model="modelValue"
+            type="checkbox"
+            :name
+            :required
+            :label="item.label"
+            :field-has-error
+            :true-value="item.value"
+            :options-layout
+            :theme
+            :input-variant
+            :direction
+            :aria-describedby
+            :display-as-disc
+            :is-pill="isPill"
+          >
+            <template #checkedIcon>
+              <slot name="checkedIcon"></slot>
+            </template>
+            <template #itemIcon>
+              <slot name="itemIcon">
+                <Icon name="material-symbols:add-2" class="icon" />
+              </slot>
+            </template>
+          </InputCheckboxRadioButton>
+          <InputCheckboxRadioWithLabel
+            v-else
+            :id="`${name}-${item.value}`"
+            v-model="modelValue"
+            type="checkbox"
+            :name
+            :required
+            :label="item.label"
+            :field-has-error
+            :true-value="item.value"
+            :options-layout
+            :theme
+            :input-variant
+            :aria-describedby
+            :display-as-disc
+          >
+            <template #checkedIcon>
+              <slot name="checkedIcon"></slot>
+            </template>
+          </InputCheckboxRadioWithLabel>
+        </template>
+      </div>
+      <InputError :id="errorId" :error-message="errorMessage" :show-error="fieldHasError" :is-detached="true" :input-variant />
+    </template>
+  </FormFieldset>
+</template>
+
+<script setup lang="ts">
+import type { FormUiTheme, OptionsLayout, IFormMultipleOptions, InputUiVariant } from "~/types/forms/types.forms";
+
+interface Props {
+  dataTestid?: string;
+  name: string;
+  legend: string;
+  label: string;
+  placeholder?: string;
+  isButton?: boolean;
+  errorMessage: string | object;
+  required?: boolean;
+  fieldHasError?: boolean;
+  multipleOptions?: boolean;
+  optionsLayout?: OptionsLayout;
+  equalCols?: boolean;
+  styleClassPassthrough?: string | string[];
+  theme?: FormUiTheme;
+  inputVariant?: InputUiVariant;
+  direction?: "row" | "row-reverse";
+  displayAsDisc?: boolean;
+  isPill?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dataTestid: "multiple-checkboxes",
+  placeholder: "",
+  isButton: false,
+  required: false,
+  fieldHasError: false,
+  multipleOptions: false,
+  optionsLayout: "equal-widths",
+  equalCols: true,
+  styleClassPassthrough: () => [],
+  theme: "default",
+  inputVariant: "normal",
+  direction: "row",
+  displayAsDisc: false,
+  isPill: false,
+});
+
+const slots = useSlots();
+
+const modelValue = defineModel<(string | number | boolean)[] | string | number | boolean | undefined>();
+const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
+  props.name,
+  toRef(props, "fieldHasError"),
+  slots
+);
+
+const { maxChildWidth, itemsContainer, updateMaxChildWidth } = useMaxChildWidth(
+  ".input-checkbox-radio-label, .input-checkbox-radio-with-label",
+  "100px"
+);
+
+onMounted(() => {
+  updateMaxChildWidth();
+});
+
+watch(
+  () => fieldData.value.data,
+  () => {
+    nextTick(updateMaxChildWidth);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+.multiple-checkboxes-items {
+  display: flex;
+  gap: 1.2rem;
+  margin-top: 1.2rem;
+
+  &.inline {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  &.block {
+    flex-direction: column;
+  }
+
+  &.equal-widths {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(
+        calc(var(--input-checked-icon-gap) + (2 * var(--input-checkbox-label-padding-inline)) + v-bind(maxChildWidth)),
+        1fr
+      )
+    );
+  }
+}
+}
+</style>

package/app/components/forms/input-checkbox/SingleCheckbox.vue

@@ -0,0 +1,144 @@
+<template>
+  <FormFieldset
+    :id
+    :description-id
+    :name
+    :legend
+    :field-has-error
+    :required
+    :data-testid
+    :style-class-passthrough="['single-checkbox-fieldset']"
+  >
+    <template #content>
+      <InputDescription
+        :id
+        :description-id
+        :name
+        :field-has-error="fieldHasError"
+        :style-class-passthrough="['input-text-description']"
+      >
+        <template #descriptionHtml>
+          <slot name="descriptionHtml"></slot>
+        </template>
+        <template #descriptionText>
+          <slot name="descriptionText"></slot>
+        </template>
+      </InputDescription>
+
+      <div class="single-checkbox-items" :class="[optionsLayout]">
+        <InputCheckboxRadioWithLabel
+          v-model="modelValue"
+          type="checkbox"
+          :name
+          :required
+          :label
+          :field-has-error
+          :true-value
+          :false-value
+          :theme
+          :input-variant
+          :aria-describedby
+        >
+          <template #checkedIcon>
+            <slot name="checkedIcon"></slot>
+          </template>
+          <template v-if="slots.labelContent" #labelContent>
+            <slot name="labelContent"></slot>
+          </template>
+        </InputCheckboxRadioWithLabel>
+      </div>
+      <InputError
+        :id="errorId"
+        :error-message
+        :show-error="fieldHasError"
+        :is-detached="true"
+        :input-variant
+        :style-class-passthrough="elementClasses"
+      />
+    </template>
+  </FormFieldset>
+</template>
+
+<script setup lang="ts">
+import type { FormUiTheme, OptionsLayout, InputUiVariant } from "~/types/forms/types.forms";
+
+interface Props {
+  dataTestid?: string;
+  name: string;
+  legend: string;
+  label?: string;
+  errorMessage: string | object;
+  required?: boolean;
+  fieldHasError?: boolean;
+  multipleOptions?: boolean;
+  trueValue?: string | number | boolean;
+  falseValue?: string | number | boolean;
+  optionsLayout?: OptionsLayout;
+  equalCols?: boolean;
+  styleClassPassthrough?: string | string[];
+  theme?: FormUiTheme;
+  inputVariant?: InputUiVariant;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dataTestid: "multiple-radio-buttons",
+  label: "",
+  required: false,
+  fieldHasError: false,
+  multipleOptions: false,
+  trueValue: true,
+  falseValue: false,
+  optionsLayout: "equal-widths",
+  equalCols: true,
+  styleClassPassthrough: () => [],
+  theme: "default",
+  inputVariant: "normal",
+});
+
+const slots = useSlots();
+const modelValue = defineModel<(string | number | boolean)[] | string | number | boolean | undefined>();
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+// const id = `${props.name}-input-${useId()}`;
+// const errorId = `${props.name}-error-message`;
+// const ariaDescribedby = computed(() => {
+//   const ariaDescribedbyId = slots.description ? `${props.name}-description` : undefined;
+//   return props.fieldHasError ? errorId : ariaDescribedbyId;
+// });
+
+const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
+  props.name,
+  toRef(props, "fieldHasError"),
+  slots
+);
+
+watchEffect(() => {
+  if (!slots.description && props.fieldHasError) {
+    updateElementClasses(["mbs-12"]);
+  }
+});
+</script>
+
+<style lang="css">
+@layer components {
+.single-checkbox-items {
+  display: flex;
+  gap: 1.2rem;
+  margin-top: 1.2rem;
+
+  &.inline {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  &.block {
+    flex-direction: column;
+  }
+
+  &.equal-widths {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  }
+}
+}
+</style>