srcdev-nuxt-forms 0.0.23 → 0.2.0

package/.prettierrc

@@ -1,4 +1,5 @@
 {
   "semi": true,
-  "singleQuote": true
+  "singleQuote": true,
+  "printWidth": 200
 }

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/_error.css

@@ -1,3 +1,12 @@
 :where(html) {
   --theme-error: var(--red-7);
+  --theme-form-error: var(--red-8);
+  --theme-form-error-border: var(--red-2);
+  --theme-form-error-border-hover: var(--red-0);
+  --theme-form-error-outline: var(--red-9);
+  --theme-form-error-outline-hover: var(--red-9);
+  --theme-form-error-bg: var(--red-9);
+  --theme-form-error-bg-hover: var(--red-2);
+  --theme-form-error-color: var(--red-1);
+  --theme-form-error-color-hover: var(--red-9);
 }

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

@@ -0,0 +1,11 @@
+:where(html) {
+  --theme-form-ghost: var(--gray-8);
+  --theme-form-ghost-border: transparent;
+  --theme-form-ghost-border-hover: var(--gray-0);
+  --theme-form-ghost-outline: transparent;
+  --theme-form-ghost-outline-hover: var(--gray-11);
+  --theme-form-ghost-bg: transparent;
+  --theme-form-ghost-bg-hover: var(--gray-2);
+  --theme-form-ghost-color: var(--gray-11);
+  --theme-form-ghost-color-hover: var(--gray-11);
+}

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

@@ -1,3 +1,13 @@
 :where(html) {
-  --theme-primary: var(--blue-8);
+  --theme-form-primary: var(--blue-8);
+  --theme-form-primary-border: var(--blue-2);
+  --theme-form-primary-border-hover: var(--blue-0);
+  --theme-form-primary-outline: var(--blue-11);
+  --theme-form-primary-outline-hover: var(--blue-11);
+  --theme-form-primary-bg: var(--blue-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

@@ -0,0 +1,13 @@
+:where(html) {
+  --theme-form-secondary: var(--gray-8);
+  --theme-form-secondary-border: var(--gray-2);
+  --theme-form-secondary-border-hover: var(--gray-0);
+  --theme-form-secondary-outline: var(--gray-8);
+  --theme-form-secondary-outline-hover: var(--gray-8);
+  --theme-form-secondary-bg: var(--gray-11);
+  --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/themes/_success.css

@@ -0,0 +1,12 @@
+:where(html) {
+  --theme-success: var(--green-7);
+  --theme-form-success: var(--green-8);
+  --theme-form-success-border: var(--green-2);
+  --theme-form-success-border-hover: var(--green-0);
+  --theme-form-success-outline: var(--green-9);
+  --theme-form-success-outline-hover: var(--green-9);
+  --theme-form-success-bg: var(--green-9);
+  --theme-form-success-bg-hover: var(--green-2);
+  --theme-form-success-color: var(--green-1);
+  --theme-form-success-color-hover: var(--green-9);
+}

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

@@ -0,0 +1,11 @@
+:where(html) {
+  --theme-form-tertiary: var(--gray-8);
+  --theme-form-tertiary-border: var(--gray-2);
+  --theme-form-tertiary-border-hover: var(--gray-2);
+  --theme-form-tertiary-outline: var(--gray-8);
+  --theme-form-tertiary-outline-hover: var(--gray-8);
+  --theme-form-tertiary-bg: var(--gray-1);
+  --theme-form-tertiary-bg-hover: var(--gray-11);
+  --theme-form-tertiary-color: var(--gray-9);
+  --theme-form-tertiary-color-hover: var(--gray-2);
+}

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

@@ -0,0 +1,11 @@
+:where(html) {
+  --theme-form-warning: var(--orange-8);
+  --theme-form-warning-border: var(--orange-2);
+  --theme-form-warning-border-hover: var(--orange-0);
+  --theme-form-warning-outline: var(--orange-11);
+  --theme-form-warning-outline-hover: var(--orange-11);
+  --theme-form-warning-bg: var(--orange-6);
+  --theme-form-warning-bg-hover: var(--orange-2);
+  --theme-form-warning-color: var(--orange-1);
+  --theme-form-warning-color-hover: var(--orange-11);
+}

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

@@ -1,2 +1,7 @@
 @import './_primary.css';
+@import './_secondary.css';
+@import './_tertiary.css';
+@import './_ghost.css';
 @import './_error.css';
+@import './_success.css';
+@import './_warning.css';

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,6 +7,60 @@
   --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;
+  --theme-form-button-font-size-normal: 16px;
+  --theme-form-button-font-size-medium: 18px;
+  --theme-form-button-font-size-large: 20px;
+
+  /*
+  * Button Padding
+  */
+
+  --theme-form-button-padding-block-x-small: 6px;
+  --theme-form-button-padding-block-small: 8px;
+  --theme-form-button-padding-block-normal: 10px;
+  --theme-form-button-padding-block-medium: 12px;
+  --theme-form-button-padding-block-large: 12px;
+
+  --theme-form-button-padding-inline-x-small: 12px;
+  --theme-form-button-padding-inline-small: 16px;
+  --theme-form-button-padding-inline-normal: 20px;
+  --theme-form-button-padding-inline-medium: 22px;
+  --theme-form-button-padding-inline-large: 24px;
+
+  /*
+  * Button Icon Sizes and Gap
+  */
+
+  --theme-form-button-padding-inline-icon-only-x-small: 4px;
+  --theme-form-button-padding-inline-icon-only-small: 6px;
+  --theme-form-button-padding-inline-icon-only-normal: 8px;
+  --theme-form-button-padding-inline-icon-only-medium: 10px;
+  --theme-form-button-padding-inline-icon-only-large: 12px;
+
+  --theme-form-button-padding-block-icon-only-x-small: 4px;
+  --theme-form-button-padding-block-icon-only-small: 4px;
+  --theme-form-button-padding-block-icon-only-normal: 6px;
+  --theme-form-button-padding-block-icon-only-medium: 8px;
+  --theme-form-button-padding-block-icon-only-large: 10px;
+
+  --theme-form-button-icon-size-x-small: 18px;
+  --theme-form-button-icon-size-small: 18px;
+  --theme-form-button-icon-size-normal: 18px;
+  --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);
 }

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/assets/styles/variables/colors/_orange.css

@@ -5,7 +5,7 @@
   --orange-3: #ffc078;
   --orange-4: #ffa94d;
   --orange-5: #ff922b;
-  --orange-6: #fd7e14;
+  --orange-6: #ff7400;
   --orange-7: #f76707;
   --orange-8: #e8590c;
   --orange-9: #d9480f;

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

@@ -8,7 +8,7 @@
   --red-6: #fa5252;
   --red-7: #f03e3e;
   --red-8: #e03131;
-  --red-9: #c92a2a;
+  --red-9: #ff0b0b;
   --red-10: #b02525;
   --red-11: #962020;
   --red-12: #7d1a1a;

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

@@ -0,0 +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'],
+  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

@@ -24,7 +24,7 @@
     "hint": "password"
   },
   "emailaddress": {
-    "pattern": "^(?!@)((?!([\\.]))([\\w\\.\\-\\+']{1,}))?((@)([\\w\\-]{2,})+((\\.)([\\w]{2,}))+)$",
+    "pattern": "^(?!@)((?!([\\.]))([\\w\\.\\-\\+']{1,}))?((@)([\\w\\-]{1,})+((\\.)([\\w]{2,}))+)$",
     "minlength": 7,
     "maxlength": 255,
     "hint": "you@your-email.com"
@@ -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>