srcdev-nuxt-forms 2.4.24 → 3.0.0

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

@@ -1,203 +0,0 @@
-<template>
-  <fieldset class="multiple-checkboxes-fieldset" :class="[elementClasses, { error: fieldHasError }]" :data-testid>
-    <legend :class="[{ 'has-description': hasDescription }]">{{ legend }}</legend>
-
-    <div v-if="hasDescriptionSlot" :id="`${id}-description`">
-      <slot name="description"></slot>
-    </div>
-
-    <div class="multiple-checkboxes-items" :class="[optionsLayout]">
-      <template v-for="item in fieldData.data" :key="item.id">
-        <InputCheckboxRadioButton
-          v-if="isButton"
-          type="checkbox"
-          :id="`${name}-${item.value}`"
-          :name
-          :required
-          :label="item.label"
-          :fieldHasError
-          v-model="modelValue"
-          :true-value="item.value"
-          :size
-          :optionsLayout
-          :theme
-          :direction
-          :ariaDescribedby
-        >
-          <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
-          type="checkbox"
-          :id="`${name}-${item.value}`"
-          :name
-          :required
-          :label="item.label"
-          :fieldHasError
-          v-model="modelValue"
-          :true-value="item.value"
-          :size
-          :optionsLayout
-          :theme
-          :ariaDescribedby
-        >
-          <template #checkedIcon>
-            <slot name="checkedIcon"></slot>
-          </template>
-        </InputCheckboxRadioWithLabel>
-      </template>
-    </div>
-    <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="errorId" :isDetached="true" />
-  </fieldset>
-</template>
-
-<script setup lang="ts">
-import propValidators from '../c12/prop-validators';
-import type { IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
-
-const { dataTestid, name, legend, label, required, fieldHasError, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme, direction } = defineProps({
-  dataTestid: {
-    type: String,
-    default: 'multiple-checkboxes',
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  legend: {
-    type: String,
-    required: true,
-  },
-  label: {
-    type: String,
-    required: true,
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  isButton: {
-    type: Boolean,
-    default: false,
-  },
-  errorMessage: {
-    type: [Object, String],
-    required: true,
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  fieldHasError: {
-    type: Boolean,
-    default: false,
-  },
-  multipleOptions: {
-    type: Boolean,
-    default: false,
-  },
-  size: {
-    type: String as PropType<string>,
-    default: 'medium',
-    validator(value: string) {
-      return propValidators.size.includes(value);
-    },
-  },
-  optionsLayout: {
-    type: String as PropType<string>,
-    default: 'equal-widths',
-    validator(value: string) {
-      return propValidators.optionsLayout.includes(value);
-    },
-  },
-  equalCols: {
-    type: Boolean,
-    default: true,
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-  theme: {
-    type: String as PropType<string>,
-    default: 'primary',
-    validator(value: string) {
-      return propValidators.theme.includes(value);
-    },
-  },
-  direction: {
-    type: String as PropType<'row' | 'row-reverse'>,
-    default: 'row',
-    validator(value: string) {
-      return ['row', 'row-reverse'].includes(value);
-    },
-  },
-});
-
-const slots = useSlots();
-const hasDescriptionSlot = computed(() => slots.description !== undefined);
-const hasDescription = computed(() => slots.description !== undefined);
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
-
-const modelValue = defineModel();
-const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
-
-const id = useId();
-const errorId = `${name}-error-message`;
-const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = hasDescriptionSlot.value ? `${name}-description` : undefined;
-  return fieldHasError ? errorId : ariaDescribedbyId;
-});
-</script>
-
-<style lang="css">
-.multiple-checkboxes-fieldset {
-  margin: 0;
-  padding: 0;
-  border: 0;
-
-  legend {
-    font-family: var(--font-family);
-    font-size: 1.6rem;
-    font-weight: 500;
-
-    &.has-description {
-      margin-bottom: 0;
-    }
-  }
-
-  .label-description {
-    font-family: var(--font-family);
-    font-size: 1.6rem;
-    margin-top: 1.2rem;
-  }
-}
-
-.multiple-checkboxes-items {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  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>

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

@@ -1,169 +0,0 @@
-<template>
-  <fieldset class="single-checkbox-fieldset" :class="[elementClasses, { error: fieldHasError }]" :data-testid>
-    <legend :class="[{ 'has-description': hasDescription }]">{{ legend }}</legend>
-
-    <div v-if="hasDescriptionSlot" :id="`${name}-description`">
-      <slot name="description"></slot>
-    </div>
-
-    <div class="single-checkbox-items" :class="[optionsLayout]">
-      <InputCheckboxRadioWithLabel type="checkbox" :name :required :label :fieldHasError v-model="modelValue" :trueValue :falseValue :size :theme :ariaDescribedby>
-        <template #checkedIcon>
-          <slot name="checkedIcon"></slot>
-        </template>
-        <template v-if="hasLabelContent" #labelContent>
-          <slot name="labelContent"></slot>
-        </template>
-      </InputCheckboxRadioWithLabel>
-    </div>
-    <InputError :errorMessage :showError="fieldHasError" :id="errorId" :isDetached="true" :styleClassPassthrough="inputErrorStyles" />
-  </fieldset>
-</template>
-
-<script setup lang="ts">
-import propValidators from '../c12/prop-validators';
-import type { IFormMultipleOptions } from '@/types/types.forms';
-
-const props = defineProps({
-  dataTestid: {
-    type: String,
-    default: 'multiple-radio-buttons',
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  legend: {
-    type: String,
-    required: true,
-  },
-  label: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  errorMessage: {
-    type: [Object, String],
-    required: true,
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  fieldHasError: {
-    type: Boolean,
-    default: false,
-  },
-  multipleOptions: {
-    type: Boolean,
-    default: false,
-  },
-  size: {
-    type: String as PropType<string>,
-    default: 'medium',
-    validator(value: string) {
-      return propValidators.size.includes(value);
-    },
-  },
-  trueValue: {
-    type: [String, Number, Boolean],
-    default: true,
-  },
-  falseValue: {
-    type: [String, Number, Boolean],
-    default: false,
-  },
-  optionsLayout: {
-    type: String as PropType<string>,
-    default: 'equal-widths',
-    validator(value: string) {
-      return propValidators.optionsLayout.includes(value);
-    },
-  },
-  equalCols: {
-    type: Boolean,
-    default: true,
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-  theme: {
-    type: String as PropType<string>,
-    default: 'primary',
-    validator(value: string) {
-      return propValidators.theme.includes(value);
-    },
-  },
-});
-
-const slots = useSlots();
-const hasDescriptionSlot = computed(() => slots.description !== undefined);
-const hasDescription = computed(() => slots.description !== undefined);
-const hasLabelContent = computed(() => slots.labelContent !== undefined);
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-const modelValue = defineModel();
-const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
-
-const inputErrorStyles = ref<string[]>(props.styleClassPassthrough);
-
-const errorId = `${name}-error-message`;
-const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = hasDescriptionSlot.value ? `${name}-description` : undefined;
-  return props.fieldHasError ? errorId : ariaDescribedbyId;
-});
-
-watchEffect(() => {
-  if (!hasDescription.value && props.fieldHasError) {
-    inputErrorStyles.value.push('mbs-12');
-  } else {
-    inputErrorStyles.value = inputErrorStyles.value.filter((style) => style !== 'mbs-12');
-  }
-});
-</script>
-
-<style lang="css">
-.single-checkbox-fieldset {
-  margin: 0;
-  padding: 0;
-  border: 0;
-
-  legend {
-    font-family: var(--font-family);
-    font-size: 1.6rem;
-    font-weight: 500;
-
-    &.has-description {
-      margin-bottom: 0;
-    }
-  }
-
-  .label-description {
-    font-family: var(--font-family);
-    font-size: 1.6rem;
-    margin-top: 1.2rem;
-  }
-}
-
-.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>

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

@@ -1,98 +0,0 @@
-// https://nuxt.com/docs/getting-started/testing#unit-testing
-import { describe, it, expect } from 'vitest';
-import { VueWrapper } from '@vue/test-utils';
-import { mountSuspended } from '@nuxt/test-utils/runtime';
-import ComponentUnderTest from '../MultipleCheckboxes.vue';
-import tagsData from './data/tags.json';
-
-let 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,
-  size: 'small',
-  optionsLayout: 'inline',
-  styleClassPassthrough: ['testClass'],
-  theme: 'primary',
-};
-
-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);
-    expect(wrapper.find('[data-testid]').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.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.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/components/forms/input-checkbox/tests/data/tags.json

@@ -1,67 +0,0 @@
-{
-  "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
-}