srcdev-nuxt-components 8.0.3 → 9.0.0

package/app/components/forms/input-checkbox/tests/MultipleCheckboxes.spec.ts

@@ -0,0 +1,101 @@
+// https://nuxt.com/docs/getting-started/testing#unit-testing
+import type { VueWrapper } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { ref } from "vue";
+import type { FormUiTheme, OptionsLayout } from "~/types/forms/types.forms";
+import ComponentUnderTest from "../MultipleCheckboxes.vue";
+import tagsData from "./data/tags.json";
+
+const initialPropsData = {
+  dataTestid: "multiple-checkboxes",
+  id: "tags",
+  name: "tags",
+  legend: "Choose tags (as checkboxes)",
+  required: true,
+  label: "Check between 3 and 8 tags",
+  placeholder: "eg. Type something here",
+  isButton: true,
+  errorMessage: "Please select between 3 and 8 tags",
+  fieldHasError: false,
+  fieldData: tagsData,
+  optionsLayout: "inline" as OptionsLayout,
+  styleClassPassthrough: ["testClass"],
+  theme: "default" as FormUiTheme,
+};
+
+const initialSlots = {
+  checkedIcon: () => ``,
+  itemIcon: () => `<Icon name="material-symbols:add-2" class="icon" />`,
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}, slotsData = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+  const mockSlotsData = { ...initialSlots, ...slotsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+    slots: mockSlotsData,
+  });
+};
+
+describe("MultipleCheckboxes Component", () => {
+  it("Mounts", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper).toBeTruthy();
+  });
+
+  it("renders properly", async () => {
+    wrapper = await wrapperFactory();
+    const dataTestIdElem = wrapper.attributes("data-testid");
+    expect(dataTestIdElem).toBe(initialPropsData.dataTestid);
+    // The styleClassPassthrough is applied to the FormFieldset component, not the root
+    expect(wrapper.find(".form-fieldset").classes()).toContain("testClass");
+  });
+
+  it("updates checkbox modelValue when items clicked", async () => {
+    const modelValue = ref<string[]>([]);
+    const propsData = {
+      modelValue,
+    };
+    wrapper = await wrapperFactory(propsData);
+    const checkboxElements = wrapper.findAll('input[type="checkbox"]');
+
+    /*
+     * Test the first checkbox checked
+     **/
+    const firstCheckbox = checkboxElements[0];
+    expect(firstCheckbox).toBeDefined();
+    expect(firstCheckbox!.attributes("aria-checked")).toBe("false");
+    const firstCheckboxTrueValue = firstCheckbox!.attributes("true-value");
+
+    await firstCheckbox!.trigger("click");
+
+    expect(wrapper.emitted()).toHaveProperty("update:modelValue");
+    const firstEmittedEvents = wrapper.emitted("update:modelValue");
+    if (firstEmittedEvents && firstEmittedEvents[0]) {
+      expect(firstEmittedEvents[0]).includes(firstCheckboxTrueValue);
+    }
+
+    expect(firstCheckbox!.attributes("aria-checked")).toBe("true");
+
+    /*
+     * Test the second checkbox chekced
+     **/
+    const secondCheckbox = checkboxElements[1];
+    expect(secondCheckbox).toBeDefined();
+    expect(secondCheckbox!.attributes("aria-checked")).toBe("false");
+    const secondCheckboxTrueValue = secondCheckbox!.attributes("true-value");
+
+    await secondCheckbox!.trigger("click");
+
+    expect(wrapper.emitted()).toHaveProperty("update:modelValue");
+    const secondEmittedEvents = wrapper.emitted("update:modelValue");
+    if (secondEmittedEvents && secondEmittedEvents[0]) {
+      expect(secondEmittedEvents[1]).includes(secondCheckboxTrueValue);
+    }
+
+    expect(secondCheckbox!.attributes("aria-checked")).toBe("true");
+  });
+});

package/app/components/forms/input-checkbox/tests/data/tags.json

@@ -0,0 +1,67 @@
+{
+  "data": [
+    {
+      "id": "pizza",
+      "name": "tags",
+      "value": "pizza",
+      "label": "Pizza"
+    },
+    {
+      "id": "italian",
+      "name": "tags",
+      "value": "italian",
+      "label": "Italian"
+    },
+    {
+      "id": "vegetarian",
+      "name": "tags",
+      "value": "vegetarian",
+      "label": "Vegetarian"
+    },
+    {
+      "id": "stir-fry",
+      "name": "tags",
+      "value": "stir-fry",
+      "label": "Stir-fry"
+    },
+    {
+      "id": "asian",
+      "name": "tags",
+      "value": "asian",
+      "label": "Asian"
+    },
+    {
+      "id": "cookies",
+      "name": "tags",
+      "value": "cookies",
+      "label": "Cookies"
+    },
+    {
+      "id": "dessert",
+      "name": "tags",
+      "value": "dessert",
+      "label": "Dessert"
+    },
+    {
+      "id": "baking",
+      "name": "tags",
+      "value": "baking",
+      "label": "Baking"
+    },
+    {
+      "id": "pasta",
+      "name": "tags",
+      "value": "pasta",
+      "label": "Pasta"
+    },
+    {
+      "id": "chicken",
+      "name": "tags",
+      "value": "chicken",
+      "label": "Chicken"
+    }
+  ],
+  "total": 5,
+  "skip": 0,
+  "limit": 10
+}

package/app/components/forms/input-checkbox-radio/InputCheckboxRadioButton.vue

@@ -0,0 +1,174 @@
+<template>
+  <label
+    :for="id"
+    class="input-checkbox-radio-options-button"
+    :data-theme="theme"
+    :data-invalid="fieldHasError ? '' : null"
+    :class="[elementClasses, optionsLayout, { error: fieldHasError }, { 'is-pill': isPill }]"
+  >
+    <InputCheckboxRadioCore
+      :id
+      v-model="modelValue"
+      :is-button="true"
+      :type
+      :name
+      :required
+      :true-value="trueValue"
+      :false-value="falseValue"
+      :field-has-error="fieldHasError"
+      :theme
+      :aria-describedby="ariaDescribedby"
+      :display-as-disc="displayAsDisc"
+    >
+      <template #checkedIcon>
+        <slot name="checkedIcon"></slot>
+      </template>
+    </InputCheckboxRadioCore>
+    <div v-if="slots.labelContent" class="input-checkbox-radio-options-button-label">
+      <slot name="labelContent"></slot>
+    </div>
+    <div v-else class="input-checkbox-radio-options-button-label">{{ label }}</div>
+    <div class="decorator-icon">
+      <slot name="itemIcon">
+        <Icon name="material-symbols:add-2" class="icon" aria-hidden="true" focusable="false" />
+      </slot>
+    </div>
+  </label>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  id: string;
+  type: "checkbox" | "radio";
+  name: string;
+  required?: boolean;
+  theme?: "default" | "success" | "error" | "warning";
+  fieldHasError?: boolean;
+  styleClassPassthrough?: string | string[];
+  trueValue?: string | number | boolean;
+  falseValue?: string | number | boolean;
+  ariaDescribedby?: string;
+  displayAsDisc?: boolean;
+  multipleOptions?: boolean;
+  label: string;
+  optionsLayout?: string;
+  direction?: "row" | "row-reverse";
+  isPill?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  required: false,
+  theme: "default",
+  fieldHasError: false,
+  styleClassPassthrough: () => [],
+  trueValue: true,
+  falseValue: false,
+  ariaDescribedby: "",
+  displayAsDisc: false,
+  multipleOptions: false,
+  optionsLayout: "equal-widths",
+  direction: "row",
+  isPill: false,
+});
+
+const slots = useSlots();
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough || []);
+
+const modelValue = defineModel<(string | number | boolean)[] | string | number | boolean | undefined>();
+
+const flexDirection = ref(props.direction);
+</script>
+
+<style lang="css">
+@layer components {
+.input-checkbox-radio-options-button {
+  --_white-space: wrap;
+
+  display: flex;
+  flex-direction: v-bind(flexDirection);
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  border-radius: 0.4rem;
+  transition: all 0.2s ease-in-out;
+
+  &.is-pill {
+    border-radius: 100vw;
+  }
+
+  &.inline {
+    --_white-space: nowrap;
+  }
+  background-color: var(--theme-input-surface);
+  border: var(--form-element-border-width) solid var(--theme-input-border);
+  outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+
+  box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem transparent;
+
+  &:hover {
+    background-color: var(--theme-input-surface-hover);
+    border-color: var(--theme-input-border);
+    outline-color: var(--theme-input-outline-hover);
+    outline-offset: var(--form-element-outline-offset-focus);
+    cursor: pointer;
+  }
+
+  &:has(.input-checkbox-radio-core:focus-visible) {
+    background-color: var(--theme-input-surface-focus);
+    outline-color: var(--theme-input-outline-focus);
+    outline-offset: var(--form-element-outline-offset-focus);
+  }
+
+  padding-block: 0.4rem;
+  padding-inline: 1.2rem;
+  gap: 1rem;
+
+  .input-checkbox-radio-options-button-label {
+    display: flex;
+    flex-grow: 1;
+    color: var(--theme-checkbox-label-text-color);
+    font-size: var(--input-font-size);
+    width: 100%;
+    min-height: var(--input-element-line-height);
+    align-items: center;
+    justify-content: center;
+    padding-block: 0.8rem;
+    padding-inline: 0.8rem;
+    white-space: var(--_white-space);
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .decorator-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--theme-checkbox-decorator-color);
+
+    .icon {
+      height: var(--input-checkbox-decorator-icon-size);
+      width: var(--input-checkbox-decorator-icon-size);
+    }
+  }
+
+  .input-checkbox-radio-wrapper {
+    width: calc(var(--input-checked-icon-size) - 0.6rem);
+    height: calc(var(--input-checked-icon-size) - 0.6rem);
+
+    .input-checked-icon-slot {
+      .input-checked-icon-checked {
+        width: calc(var(--input-checked-icon-size) - 0.8rem);
+        height: calc(var(--input-checked-icon-size) - 0.8rem);
+      }
+    }
+
+    .input-checkbox-radio-core {
+      width: calc(var(--input-checked-icon-size) - 0.6rem);
+      height: calc(var(--input-checked-icon-size) - 0.6rem);
+    }
+  }
+}
+}
+</style>

package/app/components/forms/input-checkbox-radio/InputCheckboxRadioCore.vue

@@ -0,0 +1,199 @@
+<template>
+  <div
+    class="input-checkbox-radio-wrapper"
+    :data-theme="theme"
+    :data-invalid="fieldHasError ? '' : null"
+    :class="wrapperClasses"
+  >
+    <div class="input-checked-icon-slot">
+      <slot name="checkedIcon">
+        <Icon :name="defaultIcon" class="input-checked-icon-checked" />
+      </slot>
+    </div>
+
+    <input
+      :id
+      ref="inputField"
+      v-model="modelValue"
+      :type
+      :true-value="trueValue"
+      :false-value="falseValue"
+      :name
+      :required="required && !multipleOptions"
+      :value="trueValue"
+      class="input-checkbox-radio-core"
+      :class="inputClasses"
+      :aria-checked="isChecked ? 'true' : 'false'"
+      :aria-describedby="ariaDescribedby"
+      :aria-invalid="fieldHasError ? 'true' : undefined"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms";
+
+interface Props {
+  type: "checkbox" | "radio";
+  id: string;
+  name: string;
+  required?: boolean;
+  theme?: FormUiTheme;
+  fieldHasError?: boolean;
+  styleClassPassthrough?: string | string[];
+  trueValue?: string | number | boolean;
+  falseValue?: string | number | boolean;
+  ariaDescribedby?: string;
+  displayAsDisc?: boolean;
+  multipleOptions?: boolean;
+  isButton?: boolean;
+  inputVariant?: InputUiVariant;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  required: false,
+  theme: "default",
+  fieldHasError: false,
+  styleClassPassthrough: () => [],
+  trueValue: true,
+  falseValue: false,
+  ariaDescribedby: "",
+  displayAsDisc: false,
+  multipleOptions: false,
+  isButton: false,
+  inputVariant: "normal",
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough || []);
+
+const modelValue = defineModel<(string | number | boolean)[] | string | number | boolean | undefined>();
+
+const inputField = ref<HTMLInputElement | null>(null);
+
+const defaultIcon = computed(() => {
+  return props.type === "checkbox" ? "material-symbols:check-small" : "material-symbols:circle";
+});
+
+// Cache array check for performance
+const isModelValueArray = computed(() => Array.isArray(modelValue.value));
+
+const isChecked = computed(() => {
+  if (!props.trueValue) return false;
+
+  if (isModelValueArray.value) {
+    return (modelValue.value as (string | number | boolean)[])?.includes(props.trueValue) || false;
+  } else {
+    return modelValue.value === props.trueValue;
+  }
+});
+
+// Consolidated class computations
+const wrapperClasses = computed(() => [
+  props.type,
+  props.inputVariant,
+  elementClasses.value,
+  {
+    button: props.isButton,
+    "display-as-disc": props.displayAsDisc,
+  },
+]);
+
+const inputClasses = computed(() => [
+  {
+    "is-button": props.isButton,
+  },
+]);
+</script>
+
+<style lang="css">
+@layer components {
+.input-checkbox-radio-wrapper {
+  display: grid;
+  grid-template-areas: "element-stack";
+  place-content: center;
+
+  background-color: var(--theme-checkbox-symbol-surface);
+  border: 0.1rem solid var(--theme-input-border);
+  outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+
+  height: var(--input-checked-element-size);
+  width: var(--input-checked-element-size);
+
+  transition: all var(--theme-form-transition-duration) ease-in-out;
+
+  &.checkbox {
+    border-radius: var(--form-input-border-radius);
+    &.underlined {
+      border-radius: 0;
+    }
+    &.button {
+      &.display-as-disc {
+        border-radius: 100vw;
+      }
+    }
+  }
+
+  &.radio {
+    border-radius: 100vw;
+  }
+
+  &:not(:is(.button)) {
+    &:has(input:focus-visible) {
+      outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
+      outline-offset: var(--form-element-outline-offset-focus);
+    }
+  }
+
+  &:has(input:checked) {
+    .input-checked-icon-slot {
+      opacity: 1;
+
+      .input-checked-icon-checked,
+      .icon {
+        color: var(--theme-checkbox-symbol-color);
+      }
+    }
+  }
+
+  .input-checked-icon-slot {
+    grid-area: element-stack;
+    display: grid;
+    place-content: center;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+
+    .input-checked-icon-checked,
+    .icon {
+      color: var(--theme-checkbox-symbol-color);
+      height: var(--input-checked-icon-size);
+      width: var(--input-checked-icon-size);
+      box-shadow: var(--_box-shadow);
+    }
+  }
+
+  .input-checkbox-radio-core {
+    touch-action: manipulation;
+    grid-area: element-stack;
+    appearance: none;
+    margin: 0;
+    overflow: hidden;
+    opacity: 0;
+
+    height: var(--input-checked-element-size);
+    width: var(--input-checked-element-size);
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    /* &:not(.is-button) {
+      &:focus-visible {
+        border: var(--input-checkbox-radio-wrapper-border-on);
+        outline: var(--input-checkbox-radio-wrapper-outline-on);
+        box-shadow: var(--input-checkbox-radio-wrapper-box-shadow-on);
+      }
+    } */
+  }
+}
+}
+</style>

package/app/components/forms/input-checkbox-radio/InputCheckboxRadioWithLabel.vue

@@ -0,0 +1,104 @@
+<template>
+  <label
+    :for="id"
+    class="input-checkbox-radio-with-label"
+    :class="[elementClasses, optionsLayout, { error: fieldHasError }]"
+  >
+    <InputCheckboxRadioCore
+      :id
+      v-model="modelValue"
+      :type
+      :name
+      :required
+      :true-value="trueValue"
+      :false-value="falseValue"
+      :field-has-error="fieldHasError"
+      :theme
+      :input-variant
+      :aria-describedby="ariaDescribedby"
+      :display-as-disc="displayAsDisc"
+    >
+      <template #checkedIcon>
+        <slot name="checkedIcon"></slot>
+      </template>
+    </InputCheckboxRadioCore>
+
+    <div v-if="slots.labelContent" class="input-checkbox-radio-label body-normal">
+      <slot name="labelContent"></slot>
+    </div>
+    <div v-else class="input-checkbox-radio-label body-normal-semibold">{{ label }}</div>
+  </label>
+</template>
+
+<script setup lang="ts">
+import type { InputUiVariant } from "~/types/forms/types.forms";
+
+interface Props {
+  type: "checkbox" | "radio";
+  name: string;
+  required?: boolean;
+  theme?: "default" | "success" | "error" | "warning";
+  fieldHasError?: boolean;
+  styleClassPassthrough?: string | string[];
+  trueValue?: string | number | boolean;
+  falseValue?: string | number | boolean;
+  ariaDescribedby?: string;
+  displayAsDisc?: boolean;
+  multipleOptions?: boolean;
+  label: string;
+  optionsLayout?: string;
+  inputVariant?: InputUiVariant;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  required: false,
+  theme: "default",
+  fieldHasError: false,
+  styleClassPassthrough: () => [],
+  trueValue: true,
+  falseValue: false,
+  ariaDescribedby: "",
+  displayAsDisc: false,
+  multipleOptions: false,
+  optionsLayout: "equal-widths",
+  inputVariant: "normal",
+});
+
+const slots = useSlots();
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough || []);
+
+const modelValue = defineModel<(string | number | boolean)[] | string | number | boolean | undefined>();
+const id = useId();
+</script>
+
+<style lang="css">
+@layer components {
+.input-checkbox-radio-with-label {
+  --_white-space: wrap;
+
+  display: flex;
+  align-items: center;
+  gap: var(--input-checked-icon-gap);
+  min-height: var(--input-min-height);
+
+  transition: all var(--theme-form-transition-duration) ease-in-out;
+
+  &.inline {
+    --_white-space: nowrap;
+  }
+
+  .input-checkbox-radio-label {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    padding-block: var(--input-checkbox-label-padding-block);
+    padding-inline: var(--input-checkbox-label-padding-inline);
+    /* white-space: nowrap; */
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+}
+</style>