srcdev-nuxt-forms 3.0.0 → 4.0.0

package/assets/styles/variables/colors/_orange.css

@@ -0,0 +1,15 @@
+:root {
+  --orange-0: #fff4e6;
+  --orange-1: #ffe8cc;
+  --orange-2: #ffd8a8;
+  --orange-3: #ffc078;
+  --orange-4: #ffa94d;
+  --orange-5: #ff922b;
+  --orange-6: #ff7400;
+  --orange-7: #f76707;
+  --orange-8: #e8590c;
+  --orange-9: #d9480f;
+  --orange-10: #bf400d;
+  --orange-11: #99330b;
+  --orange-12: #c23903;
+}

package/assets/styles/variables/colors/_red.css

@@ -0,0 +1,15 @@
+:root {
+  --red-0: #fff5f5;
+  --red-1: #ffe3e3;
+  --red-2: #ffc9c9;
+  --red-3: #ffa8a8;
+  --red-4: #ff8787;
+  --red-5: #ff6b6b;
+  --red-6: #fa5252;
+  --red-7: #f03e3e;
+  --red-8: #e03131;
+  --red-9: #ff0b0b;
+  --red-10: #b02525;
+  --red-11: #962020;
+  --red-12: #cc0000;
+}

package/assets/styles/variables/colors/_yellow.css

@@ -0,0 +1,15 @@
+:root {
+  --yellow-0: #fff9db;
+  --yellow-1: #fff3bf;
+  --yellow-2: #ffec99;
+  --yellow-3: #ffe066;
+  --yellow-4: #ffd43b;
+  --yellow-5: #fcc419;
+  --yellow-6: #fab005;
+  --yellow-7: #f59f00;
+  --yellow-8: #f08c00;
+  --yellow-9: #e67700;
+  --yellow-10: #b35c00;
+  --yellow-11: #804200;
+  --yellow-12: #663500;
+}

package/assets/styles/variables/colors/colors.css

@@ -0,0 +1,6 @@
+@import './_red.css';
+@import './_green.css';
+@import './_blue.css';
+@import './_orange.css';
+@import './_gray.css';
+@import './_yellow.css';

package/assets/styles/variables/index.css

@@ -0,0 +1 @@
+@import './colors/colors.css';

package/components/forms/c12/prop-validators/index.ts

@@ -0,0 +1,38 @@
+export const propValidators = {
+  size: ['x-small', 'small', 'normal', 'medium', 'large'],
+  weight: [
+    'wght-100',
+    'wght-200',
+    'wght-300',
+    'wght-400',
+    'wght-500',
+    'wght-600',
+    'wght-700',
+    'wght-800',
+    'wght-900',
+    'light',
+    'normal',
+    'bold',
+    'fvs-wght-100',
+    'fvs-wght-200',
+    'fvs-wght-300',
+    'fvs-wght-400',
+    'fvs-wght-500',
+    'fvs-wght-600',
+    'fvs-wght-700',
+    'fvs-wght-800',
+    'fvs-wght-900',
+  ],
+  theme: ['primary', 'secondary', 'tertiary', 'ghost', 'error', 'success', 'warning', 'input-action', 'input-action-underlined'],
+  checkboxAppearance: [null, 'with-decorator'],
+  checkboxStyle: ['check', 'cross'],
+  radioAppearance: [null, 'with-decorator'],
+  optionsLayout: ['block', 'inline', 'equal-widths'],
+  labelWeight: ['normal', 'semi-bold', 'bold'],
+  inputVariant: ['normal', 'outlined', 'underlined'],
+  inputTypesButton: ['button', 'cancel', 'reset', 'submit'],
+  inputTypesText: ['text', 'email', 'password', 'number', 'tel', 'url'],
+  inputMode: ['text', 'email', 'tel', 'url', 'search', 'numeric', 'none', 'decimal'],
+};
+
+export default propValidators;

package/components/forms/c12/utils.ts

@@ -0,0 +1,14 @@
+import type { InpuTextC12, IFormFieldC12, IFormData } from '@/types/types.forms';
+
+const formFieldC12 = <IFormFieldC12>{
+  label: '',
+  placeholder: '',
+  errorMessage: '',
+  useCustomError: false,
+  customErrors: {},
+  isValid: false,
+  isDirty: false,
+  type: 'string',
+};
+
+export { formFieldC12 };

package/components/forms/form-errors/InputError.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="input-error-message" :id :class="[inputVariant, elementClasses, { show: showError }, { detached: isDetached }, { hide: !showError }]" :data-Testid>
+    <div class="inner" :class="[{ show: showError }]">
+      <div class="inner-content">
+        <div class="inner-icon">
+          <Icon name="radix-icons:circle-backslash" class="icon" />
+        </div>
+        <div class="message">
+          <ul v-if="isArray" class="message-list">
+            <li v-for="(message, index) in errorMessage" :key="index" class="message-list-item">{{ message }}</li>
+          </ul>
+          <span v-else class="message-single">
+            {{ errorMessage }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+
+const props = defineProps({
+  dataTestid: {
+    type: String,
+    default: 'inputError',
+  },
+  errorMessage: {
+    type: [Array, Object, String],
+    required: true,
+  },
+  showError: {
+    type: Boolean,
+    required: true,
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  compact: {
+    type: Boolean,
+    value: false,
+  },
+  isDetached: {
+    type: Boolean,
+    required: true,
+  },
+  inputVariant: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.inputVariant.includes(value);
+    },
+  },
+});
+
+const isArray = computed(() => {
+  return Array.isArray(props.errorMessage);
+});
+
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css" scoped>
+.input-error-message {
+  --_grid-template-rows: 0fr;
+  --_opacity-show: 1;
+  --_opacity-hide: 0;
+  --_opacity: var(--_opacity-hide);
+
+  --_border-radius: 0 0 0.4rem 0.4rem;
+  --_display-show: block;
+  --_display-hide: none;
+  --_display: var(--_display-hide);
+  --_gutter: 1.2rem;
+  --_gutter-block: 0;
+  --_gutter-inline: var(--_gutter);
+  --_transition-duration: 500ms;
+  --_transition-timing-function: linear;
+  --_padding-message: 1.2rem 1rem;
+
+  &.show {
+    --_grid-template-rows: 1fr;
+    --_opacity: var(--_opacity-show);
+    --_display: var(--_display-show);
+    --_gutter-block: var(--_gutter);
+  }
+
+  grid-row: 2;
+  grid-column: 1;
+  display: grid;
+  grid-template-rows: var(--_grid-template-rows);
+
+  color: var(--theme-error-text);
+  background-color: var(--theme-error-surface);
+  border-radius: var(--_border-radius);
+
+  transition-property: grid-template-rows;
+  transition-duration: var(--_transition-duration);
+  transition-timing-function: var(--_transition-timing-function);
+  transition-behavior: allow-discrete;
+
+  &.detached {
+    border-radius: var(--form-input-border-radius);
+    margin-block-start: 2rem;
+  }
+
+  &.outlined {
+    --_border-radius: 0;
+  }
+
+  &.underlined {
+    --_border-radius: 0;
+  }
+
+  .inner {
+    align-items: center;
+
+    overflow: hidden;
+    transition: opacity var(--_transition-duration) var(--_transition-timing-function), display var(--_transition-duration) var(--_transition-timing-function) allow-discrete;
+
+    .inner-content {
+      display: flex;
+      align-items: center;
+
+      .inner-icon {
+        display: inline-block;
+        padding-left: 1.2rem;
+
+        .icon {
+          color: white;
+          transform: translateY(3px);
+        }
+      }
+
+      .message {
+        display: inline-block;
+        flex-grow: 1;
+        font-family: var(--font-family);
+        font-size: 1.6rem;
+        font-weight: 500;
+        padding-block: var(--_padding-message);
+        padding-inline: var(--_gutter-inline);
+
+        .message-single {
+          color: white;
+        }
+
+        .message-list {
+          list-style-type: none;
+          padding-inline-start: 0;
+          margin-block-start: 0;
+          margin-block-end: 0;
+
+          .message-list-item {
+            color: white;
+          }
+
+          .message-list-item + .message-list-item {
+            margin-block-start: 0.6rem;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/components/forms/form-errors/tests/InputError.spec.ts

@@ -0,0 +1,67 @@
+// 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 '../InputError.vue';
+
+let initialPropsData = {
+  dataTestid: 'inputError',
+  errorMessage: 'Hello World',
+  showError: true,
+  id: 'testId',
+  styleClassPassthrough: ['testClass'],
+  compact: false,
+  isDetached: true,
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    props: mockPropsData,
+  });
+};
+
+describe('InputError Component', () => {
+  it('renders properly', async () => {
+    wrapper = await wrapperFactory();
+
+    // Check the value of the data-testid attribute
+    const dataTestIdValue = wrapper.attributes('data-testid');
+    expect(dataTestIdValue).toBe('inputError');
+
+    expect(wrapper.find('[data-testid]').classes()).toContain('testClass');
+    expect(wrapper.find('[data-testid]').classes()).toContain('show');
+  });
+
+  it('is not displayed by default', async () => {
+    const propData = {
+      showError: false,
+    };
+    wrapper = await wrapperFactory(propData);
+
+    expect(wrapper.find('[data-testid]').classes()).not.toContain('show');
+  });
+
+  it('is displays a single error message', async () => {
+    const propData = {
+      showError: true,
+    };
+    wrapper = await wrapperFactory(propData);
+
+    expect(wrapper.find('.message-list').exists()).toBe(false);
+    expect(wrapper.find('.message-single').text()).toContain('Hello World');
+  });
+
+  it('is displays a single error message', async () => {
+    const propData = {
+      errorMessage: ['Hello World', 'Hello World 2'],
+    };
+    wrapper = await wrapperFactory(propData);
+
+    expect(wrapper.find('.message-single').exists()).toBe(false);
+    expect(wrapper.find('.message-list .message-list-item:first-child').text()).toEqual('Hello World');
+    expect(wrapper.find('.message-list .message-list-item:last-child').text()).toEqual('Hello World 2');
+  });
+});

package/components/forms/input-button/InputButtonCore.vue

@@ -0,0 +1,191 @@
+<template>
+  <button
+    :type
+    :readonly
+    :aria-disabled="readonly"
+    :data-testid
+    :data-btn-theme="theme"
+    :data-size="size"
+    class="input-button-core"
+    :class="[`btn-${type}`, effectClass, elementClasses, { 'icon-only': isIconOnly }]"
+  >
+    <span v-if="useEffect && effect == 'fancy'" class="fancy"></span>
+    <template v-if="hasLeftContent && !isIconOnly">
+      <span class="btn-icon left">
+        <slot name="left"></slot>
+      </span>
+    </template>
+    <span class="btn-text" :class="[weight, { 'sr-only': isIconOnly }]">{{ buttonText }}</span>
+    <template v-if="hasRightContent && !isIconOnly">
+      <span class="btn-icon right">
+        <slot name="right"></slot>
+      </span>
+    </template>
+    <template v-if="isIconOnly">
+      <span class="btn-icon icon-only">
+        <slot name="iconOnly"></slot>
+      </span>
+    </template>
+  </button>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+
+const props = defineProps({
+  size: {
+    type: String as PropType<string>,
+    default: 'normal',
+    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);
+    },
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  type: {
+    type: String as PropType<'submit' | 'button' | 'reset'>,
+    default: 'button',
+    validator(value: string) {
+      return propValidators.inputTypesButton.includes(value);
+    },
+  },
+  buttonText: {
+    type: String,
+    required: true,
+  },
+  dataTestid: {
+    type: String,
+    default: '',
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  useEffect: {
+    type: Boolean,
+    default: false,
+  },
+  effect: {
+    type: String as PropType<string>,
+    default: 'fancy',
+    validator(value: string) {
+      return ['fancy', 'pulse'].includes(value);
+    },
+  },
+  isPending: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const type = toRef(() => props.type);
+const effectClass = computed(() => {
+  if (props.useEffect) {
+    return props.effect === 'fancy' ? '' : props.effect;
+  } else {
+    return '';
+  }
+});
+
+const slots = useSlots();
+const hasLeftContent = computed(() => slots.left !== undefined);
+const hasRightContent = computed(() => slots.right !== undefined);
+const isIconOnly = computed(() => slots.iconOnly !== undefined);
+
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+.input-button-core {
+  align-items: center;
+  display: flex;
+  gap: var(--form-button-icon-gap);
+  justify-content: center;
+  border: none;
+  border-radius: var(--form-input-border-radius);
+  font-family: var(--font-family);
+
+  padding-inline: var(--form-button-padding-inline);
+  padding-block-start: var(--form-element-padding-block-start);
+  padding-block-end: var(--form-element-padding-block-end);
+
+  transition: all 0.2s ease-in-out;
+
+  box-shadow: var(--box-shadow-off);
+  background-color: var(--theme-btn-bg);
+  border: var(--form-element-border-width) solid var(--theme-btn-border);
+  color: var(--theme-btn-text);
+  outline: var(--form-element-outline-width) solid var(--theme-btn-outline);
+
+  /*
+  * States
+  **/
+  &:hover {
+    --theme-btn-bg: var(--theme-btn-bg-hover);
+    --theme-btn-border: var(--theme-btn-border-hover);
+    --theme-btn-text: var(--theme-btn-text-hover);
+    --theme-btn-outline: var(--theme-btn-outline-hover);
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus-visible {
+    --theme-btn-bg: var(--theme-btn-bg-focus);
+    --theme-btn-border: var(--theme-btn-border-focus);
+    --theme-btn-text: var(--theme-btn-text-focus);
+    --theme-btn-outline: var(--theme-btn-outline-focus);
+    box-shadow: var(--box-shadow-on);
+  }
+
+  &[readonly] {
+    opacity: 0.5;
+    &:hover,
+    &:focus-visible {
+      cursor: not-allowed;
+    }
+  }
+
+  &.icon-only {
+    aspect-ratio: 1;
+    height: var(--form-icon-only-button-size);
+    width: var(--form-icon-only-button-size);
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  .btn-text {
+    display: inline-block;
+    white-space: nowrap;
+    font-size: var(--form-element-font-size);
+    line-height: var(--form-element-line-height);
+  }
+
+  .btn-icon {
+    display: flex;
+    .icon {
+      aspect-ratio: 1;
+      display: inline-block;
+      height: var(--form-icon-size);
+      width: var(--form-icon-size);
+    }
+  }
+}
+</style>

package/components/forms/input-button/variants/InputButtonConfirm.vue

@@ -0,0 +1,66 @@
+<template>
+  <InputButtonCore type="button" :use-effect :isPending :readonly :effect :data-testid :size :weight :button-text :style-class-passthrough :theme>
+    <template #left>
+      <Icon name="material-symbols:check-circle-outline" class="icon" />
+    </template>
+  </InputButtonCore>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../c12/prop-validators';
+
+defineProps({
+  size: {
+    type: String as PropType<string>,
+    default: 'normal',
+    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);
+    },
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  useEffect: {
+    type: Boolean,
+    default: false,
+  },
+  effect: {
+    type: String as PropType<string>,
+    default: 'fancy',
+    validator(value: string) {
+      return ['fancy', 'pulse'].includes(value);
+    },
+  },
+  buttonText: {
+    type: String,
+    required: true,
+  },
+  dataTestid: {
+    type: String,
+    default: '',
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  isPending: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>

package/components/forms/input-button/variants/InputButtonSubmit.vue

@@ -0,0 +1,62 @@
+<template>
+  <InputButtonCore type="button" :use-effect :isPending :readonly :effect :data-testid :size :weight :button-text :style-class-passthrough :theme />
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../c12/prop-validators';
+
+defineProps({
+  size: {
+    type: String as PropType<string>,
+    default: 'normal',
+    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);
+    },
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  useEffect: {
+    type: Boolean,
+    default: false,
+  },
+  effect: {
+    type: String as PropType<string>,
+    default: 'fancy',
+    validator(value: string) {
+      return ['fancy', 'pulse'].includes(value);
+    },
+  },
+  buttonText: {
+    type: String,
+    required: true,
+  },
+  dataTestid: {
+    type: String,
+    default: '',
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  isPending: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>