srcdev-nuxt-forms 2.4.23 → 3.0.0

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

@@ -1,15 +0,0 @@
-: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

@@ -1,15 +0,0 @@
-: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

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

package/assets/styles/variables/index.css

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

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

@@ -1,38 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,172 +0,0 @@
-<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

@@ -1,67 +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 '../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

@@ -1,191 +0,0 @@
-<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

@@ -1,66 +0,0 @@
-<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

@@ -1,62 +0,0 @@
-<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>