srcdev-nuxt-forms 2.4.24 → 3.0.0

package/components/forms/input-number/variants/InputNumberDefault.vue

@@ -1,154 +0,0 @@
-<template>
-  <div class="input-number-with-label" :data-form-theme="formTheme" :data-size="size" :class="[elementClasses, `theme-${theme}`, { error: fieldHasError }]">
-    <label class="input-number-label body-normal-bold" :for="id">{{ label }}</label>
-    <template v-if="hasDescription">
-      <slot name="description"></slot>
-    </template>
-
-    <InputNumberCore v-model="modelValue" :id :name :min :max :step :theme :required :size :weight :fieldHasError :styleClassPassthrough>
-      <template v-if="hasLeftContent" #left>
-        <InputButtonCore
-          type="button"
-          @click.stop.prevent="updateValue(-step, Number(modelValue) > min)"
-          :readonly="Number(modelValue) <= min"
-          :is-pending="false"
-          buttonText="Step down"
-          theme="input-action"
-          :size
-        >
-          <template #iconOnly>
-            <slot name="left"></slot>
-          </template>
-        </InputButtonCore>
-      </template>
-      <template v-if="hasRightContent" #right>
-        <InputButtonCore
-          type="button"
-          @click.stop.prevent="updateValue(step, Number(modelValue) < max)"
-          :readonly="Number(modelValue) >= max"
-          :is-pending="false"
-          buttonText="Step up"
-          theme="input-action"
-          :size
-        >
-          <template #iconOnly>
-            <slot name="right"></slot>
-          </template>
-        </InputButtonCore>
-      </template>
-    </InputNumberCore>
-    <InputError :errorMessage :showError="fieldHasError" :id :isDetached="true" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
-
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-  label: {
-    type: String,
-    required: true,
-  },
-  min: {
-    type: Number,
-    required: true,
-  },
-  max: {
-    type: Number,
-    required: true,
-  },
-  step: {
-    type: Number,
-    default: 1,
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  errorMessage: {
-    type: [Object, String],
-    required: true,
-  },
-  fieldHasError: {
-    type: Boolean,
-    default: false,
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  theme: {
-    type: String as PropType<string>,
-    default: 'primary',
-    validator(value: string) {
-      return propValidators.theme.includes(value);
-    },
-  },
-  size: {
-    type: String as PropType<string>,
-    default: 'medium',
-    validator(value: string) {
-      return propValidators.size.includes(value);
-    },
-  },
-  weight: {
-    type: String as PropType<string>,
-    default: 'wght-400',
-    validator(value: string) {
-      return propValidators.weight.includes(value);
-    },
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-});
-
-const slots = useSlots();
-const hasDescription = computed(() => slots.description !== undefined);
-const hasLeftContent = computed(() => slots.left !== undefined);
-const hasRightContent = computed(() => slots.right !== undefined);
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-const id = useId();
-const formTheme = computed(() => {
-  return props.fieldHasError ? 'error' : props.theme;
-});
-
-const modelValue = defineModel<number | readonly number[]>();
-
-const updateValue = (step: number, withinRangeLimit: boolean) => {
-  if (withinRangeLimit) {
-    modelValue.value = (Number(modelValue.value) + step) as number;
-  }
-};
-
-updateElementClasses(['has-left-button', 'has-right-button']);
-</script>
-
-<style lang="css">
-.input-number-with-label {
-  --_border-width: var(--form-element-border-width);
-  --_outline-width: var(--form-element-outline-width);
-  --_label-padding-inline: 1rem;
-
-  .input-number-label {
-    display: block;
-    margin-block: 0.8rem;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  .label-description {
-    font-family: var(--font-family);
-    font-size: 1.6rem;
-    margin-top: 1.2rem;
-  }
-}
-</style>

package/components/forms/input-radio/MultipleRadiobuttons.vue

@@ -1,201 +0,0 @@
-<template>
-  <fieldset :aria-required="required" :aria-invalid="fieldHasError" role="radiogroup" class="multiple-radiobuttons-fieldset" :class="[elementClasses, { error: fieldHasError }]" :data-testid>
-    <legend :class="[{ 'has-description': hasDescriptionSlot }]">{{ legend }}</legend>
-
-    <div v-if="hasDescriptionSlot" :id="`${name}-description`">
-      <slot name="description"></slot>
-    </div>
-
-    <div class="multiple-radiobuttons-items" :class="[optionsLayout]">
-      <template v-for="item in fieldData.data" :key="item.id">
-        <InputCheckboxRadioButton
-          v-if="isButton"
-          type="radio"
-          :id="`${name}-${item.value}`"
-          :name="`${name}-${item.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="radio"
-          :id="`${name}-${item.value}`"
-          :name="`${name}-${item.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 { 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: 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 { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-const id = useId();
-const errorId = `${name}-error-message`;
-const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : undefined;
-  return props.fieldHasError ? errorId : ariaDescribedbyId;
-});
-
-const modelValue = defineModel();
-const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
-</script>
-
-<style lang="css">
-.multiple-radiobuttons-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-radiobuttons-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-radio/tests/MultipleRadioButtons.spec.ts

@@ -1,89 +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 '../MultipleRadioButtons.vue';
-import tagsData from './data/tags.json';
-
-let initialPropsData = {
-  dataTestid: 'multiple-radio-buttons',
-  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('MultipleRadioButtons 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 radio modelValue when items clicked', async () => {
-    const modelValue = ref<string>('');
-    const propsData = {
-      modelValue,
-    };
-    wrapper = await wrapperFactory(propsData);
-
-    /*
-     * Test the first radio button
-     **/
-    const radiobuttonElements = wrapper.findAll('input[type="radio"]');
-    const firstRadioButton = radiobuttonElements[0];
-    expect(firstRadioButton.attributes('aria-checked')).toBe('false');
-    const firstRadioButtonTrueValue = firstRadioButton.attributes('true-value');
-
-    await firstRadioButton.trigger('click');
-    wrapper.vm.modelValue.value = firstRadioButtonTrueValue;
-    expect(firstRadioButton.attributes('aria-checked')).toBe('true');
-    expect(wrapper.vm.modelValue.value).toEqual(firstRadioButtonTrueValue);
-
-    /*
-     * Test the second radio button
-     **/
-    const secondRadioButton = radiobuttonElements[1];
-    expect(secondRadioButton.attributes('aria-checked')).toBe('false');
-    const secondRadioButtonTrueValue = secondRadioButton.attributes('true-value');
-
-    await secondRadioButton.trigger('click');
-    wrapper.vm.modelValue.value = secondRadioButtonTrueValue;
-    expect(firstRadioButton.attributes('aria-checked')).toBe('false');
-    expect(secondRadioButton.attributes('aria-checked')).toBe('true');
-    expect(wrapper.vm.modelValue.value).toEqual(secondRadioButtonTrueValue);
-  });
-});

package/components/forms/input-radio/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
-}