srcdev-nuxt-forms 0.1.0 → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 srcdev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/assets/styles/forms/index.css

@@ -1,2 +1,3 @@
 @import './variables/_theme.css';
 @import './themes/index.css';
+@import './utils/index.css';

package/assets/styles/forms/themes/_primary.css

@@ -8,4 +8,6 @@
   --theme-form-primary-bg-hover: var(--blue-2);
   --theme-form-primary-color: var(--blue-1);
   --theme-form-primary-color-hover: var(--blue-11);
+  --theme-form-primary-focus: var(--blue-6);
+  --theme-form-primary-radio-color-bg: var(--gray-00);
 }

package/assets/styles/forms/themes/_secondary.css

@@ -8,4 +8,6 @@
   --theme-form-secondary-bg-hover: var(--gray-2);
   --theme-form-secondary-color: var(--gray-1);
   --theme-form-secondary-color-hover: var(--gray-11);
+  --theme-form-secondary-focus: var(--blue-6);
+  --theme-form-secondary-radio-color-bg: var(--gray-00);
 }

package/assets/styles/forms/utils/_a11y.css

@@ -0,0 +1,5 @@
+:where(html) {
+  --focus-visible-colour: #4169e1;
+  --focus-visible-box-shadow: 1px 1px 8px 1px var(--focus-visible-colour);
+  --focus-visible-outline: 2px solid var(--focus-visible-colour);
+}

package/assets/styles/forms/utils/index.css

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

package/assets/styles/forms/variables/_theme.css

@@ -7,8 +7,12 @@
   --input-border-width-default: 2px;
   --input-border-width-thick: 3px;
 
-  --font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri,
-    'DejaVu Sans', source-sans-pro, sans-serif;
+  --input-outline-radius: 4px;
+  --input-outline-width-thin: 1px;
+  --input-outline-width-default: 2px;
+  --input-outline-width-thick: 3px;
+
+  --font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
 
   --theme-form-button-font-size-x-small: 14px;
   --theme-form-button-font-size-small: 14px;
@@ -54,19 +58,9 @@
   --theme-form-button-icon-size-medium: 20px;
   --theme-form-button-icon-size-large: 22px;
 
-  --theme-form-button-icon-gap-x-small: var(
-    --theme-form-button-padding-inline-x-small
-  );
-  --theme-form-button-icon-gap-small: var(
-    --theme-form-button-padding-inline-small
-  );
-  --theme-form-button-icon-gap-normal: var(
-    --theme-form-button-padding-inline-normal
-  );
-  --theme-form-button-icon-gap-medium: var(
-    --theme-form-button-padding-inline-medium
-  );
-  --theme-form-button-icon-gap-large: var(
-    --theme-form-button-padding-inline-large
-  );
+  --theme-form-button-icon-gap-x-small: var(--theme-form-button-padding-inline-x-small);
+  --theme-form-button-icon-gap-small: var(--theme-form-button-padding-inline-small);
+  --theme-form-button-icon-gap-normal: var(--theme-form-button-padding-inline-normal);
+  --theme-form-button-icon-gap-medium: var(--theme-form-button-padding-inline-medium);
+  --theme-form-button-icon-gap-large: var(--theme-form-button-padding-inline-large);
 }

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

@@ -1,4 +1,5 @@
 :where(html) {
+  --gray-00: #ffffff;
   --gray-0: #f8f9fa;
   --gray-1: #f1f3f5;
   --gray-2: #e9ecef;

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

@@ -1,25 +1,13 @@
 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',
-  ],
-  theme: [
-    'primary',
-    'secondary',
-    'tertiary',
-    'ghost',
-    'error',
-    'success',
-    'warning',
-  ],
+  weight: ['wght-100', 'wght-200', 'wght-300', 'wght-400', 'wght-500', 'wght-600', 'wght-700', 'wght-800', 'wght-900'],
+  theme: ['primary', 'secondary', 'tertiary', 'ghost', 'error', 'success', 'warning'],
+  checkboxAppearance: [null, 'with-decorator'],
+  checkboxStyle: ['check', 'cross'],
+  radioAppearance: [null, 'with-decorator'],
+  optionsLayout: ['block', 'inline', 'equal-widths'],
+  inputTypesButton: ['button', 'cancel', 'reset', 'submit'],
+  inputTypesText: ['text', 'email', 'password', 'number', 'tel', 'url'],
 };
 
 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/c12/validation-patterns/en.json

@@ -40,5 +40,17 @@
     "minlength": 11,
     "maxlength": 14,
     "hint": "+441632123123"
+  },
+  "message": {
+    "pattern": "^[a-zA-Z0-9 ,.<>?@:;]{1,255}$",
+    "minlength": 1,
+    "maxlength": 255,
+    "hint": "+441632123123"
+  },
+  "positiveNumber0to100": {
+    "pattern": "^(100|[1-9]?[0-9])$",
+    "minlength": 1,
+    "maxlength": 3,
+    "hint": "Enter a number between 0 and 100"
   }
 }

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

@@ -0,0 +1,132 @@
+<template>
+  <div class="input-error-message" :class="[{ show: fieldHasError }, { detached: isDetached }, { hide: !fieldHasError }]">
+    <div class="inner" :class="[{ show: fieldHasError }]">
+      <div class="message" :id="`${id}-error-message`">
+        <ul v-if="isArray">
+          <li v-for="(message, index) in errorMessaging" :key="index">{{ message }}</li>
+        </ul>
+        <span v-else>
+          {{ errorMessaging }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  errorMessaging: {
+    type: [Object, String],
+    required: true,
+  },
+  fieldHasError: {
+    type: Boolean,
+    required: true,
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+  styleClassPassthrough: {
+    type: String,
+    default: '',
+  },
+  compact: {
+    type: Boolean,
+    value: false,
+  },
+  isDetached: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const isArray = computed(() => {
+  return Array.isArray(props.errorMessaging);
+});
+</script>
+
+<style lang="css" scoped>
+.input-error-message {
+  --_grid-template-rows: 0fr;
+  --_opacity-show: 1;
+  --_opacity-hide: 0;
+  --_opacity: var(--_opacity-hide);
+
+  --_display-show: block;
+  --_display-hide: none;
+  --_display: var(--_display-hide);
+  --_gutter: 12px;
+  --_gutter-block: 0;
+  --_gutter-inline: var(--_gutter);
+  --_transition-duration: 500ms;
+  --_transition-timing-function: linear;
+  --_message-translate-y-hide: calc(var(--_gutter) * -2);
+  --_message-translate-y-show: 2px;
+  --_message-translate-y: var(--_message-translate-y-hide);
+  --_padding-message-show: var(--_gutter);
+  --_padding-message-hide: 0;
+  --_padding-message: var(--_padding-message-hide);
+
+  grid-row: 2;
+  grid-column: 1;
+  display: grid;
+  grid-template-rows: var(--_grid-template-rows);
+
+  color: hsl(from var(--theme-error) h s 95%);
+  background-color: var(--theme-error);
+
+  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(--input-border-radius);
+  }
+
+  &.show {
+    --_grid-template-rows: 1fr;
+    --_opacity: var(--_opacity-show);
+    --_display: var(--_display-show);
+    --_message-translate-y: var(--_message-translate-y-show);
+    --_gutter-block: var(--_gutter);
+    --_padding-message: var(--_padding-message-show);
+  }
+
+  .inner {
+    overflow: hidden;
+
+    transition: opacity var(--_transition-duration) var(--_transition-timing-function), display var(--_transition-duration) var(--_transition-timing-function) allow-discrete;
+
+    &.show {
+      display: var(--_display-show);
+      opacity: var(--_opacity-show);
+    }
+
+    .message {
+      font-family: var(--font-family);
+      font-size: 16px;
+      font-weight: 500;
+      padding-block: var(--_padding-message);
+      padding-inline: var(--_gutter-inline);
+      transform: translateY(var(--_message-translate-y));
+
+      transition-property: transform, padding;
+      transition-duration: var(--_transition-duration);
+      transition-timing-function: linear;
+
+      ul {
+        list-style-type: none;
+        padding-inline-start: 0;
+        margin-block-start: 0;
+        margin-block-end: 0;
+
+        li + li {
+          margin-block-start: 6px;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -4,7 +4,7 @@
     :readonly
     :aria-disabled="readonly"
     :data-test-id="dataTestId"
-    class="btn"
+    class="input-button-core btn"
     :class="[`btn-${type}`, `theme-${theme}`, size, effectClass, styleClassPassthrough, { 'icon-only': isIconOnly }]"
   >
     <span v-if="useEffect && effect == 'fancy'" class="fancy"></span>
@@ -54,9 +54,9 @@ const props = defineProps({
   },
   type: {
     type: String as PropType<'submit' | 'button' | 'reset'>,
-    default: 'submit',
+    default: 'button',
     validator(value: string) {
-      return ['button', 'cancel', 'reset', 'submit'].includes(value);
+      return propValidators.inputTypesButton.includes(value);
     },
   },
   buttonText: {
@@ -111,7 +111,6 @@ const isIconOnly = computed(() => slots.iconOnly !== undefined);
 .btn {
   --_padding-block: var(--theme-form-button-padding-block-normal);
   --_padding-inline: var(--theme-form-button-padding-inline-normal);
-  --_border-radius: 4px;
   --_icon-gap: var(--theme-form-button-icon-gap-normal);
 
   align-items: center;
@@ -119,8 +118,7 @@ const isIconOnly = computed(() => slots.iconOnly !== undefined);
   gap: var(--_icon-gap);
   justify-content: center;
   border: none;
-  border-radius: var(--_border-radius);
-
+  border-radius: var(--input-border-radius);
   font-family: var(--font-family);
 
   padding-inline: var(--_padding-inline);
@@ -128,11 +126,15 @@ const isIconOnly = computed(() => slots.iconOnly !== undefined);
 
   transition: all 0.2s ease-in-out;
 
-  &:hover,
-  &:focus-visible {
+  &:hover {
     cursor: pointer;
   }
 
+  &:focus-visible {
+    outline: var(--focus-visible-outline);
+    box-shadow: var(--focus-visible-box-shadow);
+  }
+
   &[readonly] {
     opacity: 0.5;
     &:hover,
@@ -266,6 +268,7 @@ const isIconOnly = computed(() => slots.iconOnly !== undefined);
   }
 
   --_border-width: var(--input-border-width-default);
+  --_outline-width: var(--input-outline-width-thin);
 
   /*
   * Initial theme (primary)

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

@@ -1,6 +1,6 @@
 <template>
   <InputButtonCore
-    type="submit"
+    type="button"
     :use-effect="useEffect"
     :isPending="isPending"
     :readonly

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

@@ -1,6 +1,6 @@
 <template>
   <InputButtonCore
-    type="submit"
+    type="button"
     :use-effect="useEffect"
     :isPending="isPending"
     :readonly