srcdev-nuxt-forms 0.1.0 → 1.0.0

package/assets/styles/scaffolding/_padding-helpers.css

@@ -0,0 +1,308 @@
+/* Padding */
+.p-0 {
+  padding: 0;
+}
+.pbs-0 {
+  padding-block-start: 0;
+}
+.pbe-0 {
+  padding-block-end: 0;
+}
+.pis-0 {
+  padding-inline-start: 0;
+}
+.pie-0 {
+  padding-inline-end: 0;
+}
+.pi-0 {
+  padding-inline: 0;
+}
+.pb-0 {
+  padding-block: 0;
+}
+
+.p-1 {
+  padding: 1px;
+}
+.pbs-1 {
+  padding-block-start: 1px;
+}
+.pbe-1 {
+  padding-block-end: 1px;
+}
+.pis-1 {
+  padding-inline-start: 1px;
+}
+.pie-1 {
+  padding-inline-end: 1px;
+}
+.pi-1 {
+  padding-inline: 1px;
+}
+.pb-1 {
+  padding-block: 1px;
+}
+
+.p-2 {
+  padding: 2px;
+}
+.pbs-2 {
+  padding-block-start: 2px;
+}
+.pbe-2 {
+  padding-block-end: 2px;
+}
+.pis-2 {
+  padding-inline-start: 2px;
+}
+.pie-2 {
+  padding-inline-end: 2px;
+}
+.pi-2 {
+  padding-inline: 2px;
+}
+.pb-2 {
+  padding-block: 2px;
+}
+
+.p-4 {
+  padding: 4px;
+}
+.pbs-4 {
+  padding-block-start: 4px;
+}
+.pbe-4 {
+  padding-block-end: 4px;
+}
+.pis-4 {
+  padding-inline-start: 4px;
+}
+.pie-4 {
+  padding-inline-end: 4px;
+}
+.pi-4 {
+  padding-inline: 4px;
+}
+.pb-4 {
+  padding-block: 4px;
+}
+
+.p-6 {
+  padding: 6px;
+}
+.pbs-6 {
+  padding-block-start: 6px;
+}
+.pbe-6 {
+  padding-block-end: 6px;
+}
+.pis-6 {
+  padding-inline-start: 6px;
+}
+.pie-6 {
+  padding-inline-end: 6px;
+}
+.pi-6 {
+  padding-inline: 6px;
+}
+.pb-6 {
+  padding-block: 6px;
+}
+
+.p-8 {
+  padding: 8px;
+}
+.pbs-8 {
+  padding-block-start: 8px;
+}
+.pbe-8 {
+  padding-block-end: 8px;
+}
+.pis-8 {
+  padding-inline-start: 8px;
+}
+.pie-8 {
+  padding-inline-end: 8px;
+}
+.pi-8 {
+  padding-inline: 8px;
+}
+.pb-8 {
+  padding-block: 8px;
+}
+
+.p-10 {
+  padding: 10px;
+}
+.pbs-10 {
+  padding-block-start: 10px;
+}
+.pbe-10 {
+  padding-block-end: 10px;
+}
+.pis-10 {
+  padding-inline-start: 10px;
+}
+.pie-10 {
+  padding-inline-end: 10px;
+}
+.pi-10 {
+  padding-inline: 10px;
+}
+.pb-10 {
+  padding-block: 10px;
+}
+
+.p-12 {
+  padding: 12px;
+}
+.pbs-12 {
+  padding-block-start: 12px;
+}
+.pbe-12 {
+  padding-block-end: 12px;
+}
+.pis-12 {
+  padding-inline-start: 12px;
+}
+.pie-12 {
+  padding-inline-end: 12px;
+}
+.pi-12 {
+  padding-inline: 12px;
+}
+.pb-12 {
+  padding-block: 12px;
+}
+
+.p-18 {
+  padding: 18px;
+}
+.pbs-18 {
+  padding-block-start: 18px;
+}
+.pbe-18 {
+  padding-block-end: 18px;
+}
+.pis-18 {
+  padding-inline-start: 18px;
+}
+.pie-18 {
+  padding-inline-end: 18px;
+}
+.pi-18 {
+  padding-inline: 18px;
+}
+.pb-18 {
+  padding-block: 18px;
+}
+
+.p-20 {
+  padding: 20px;
+}
+.pbs-20 {
+  padding-block-start: 20px;
+}
+.pbe-20 {
+  padding-block-end: 20px;
+}
+.pis-20 {
+  padding-inline-start: 20px;
+}
+.pie-20 {
+  padding-inline-end: 20px;
+}
+.pi-20 {
+  padding-inline: 20px;
+}
+.pb-20 {
+  padding-block: 20px;
+}
+
+.p-24 {
+  padding: 24px;
+}
+.pbs-24 {
+  padding-block-start: 24px;
+}
+.pbe-24 {
+  padding-block-end: 24px;
+}
+.pis-24 {
+  padding-inline-start: 24px;
+}
+.pie-24 {
+  padding-inline-end: 24px;
+}
+.pi-24 {
+  padding-inline: 24px;
+}
+.pb-24 {
+  padding-block: 24px;
+}
+
+.p-32 {
+  padding: 32px;
+}
+.pbs-32 {
+  padding-block-start: 32px;
+}
+.pbe-32 {
+  padding-block-end: 32px;
+}
+.pis-32 {
+  padding-inline-start: 32px;
+}
+.pie-32 {
+  padding-inline-end: 32px;
+}
+.pi-32 {
+  padding-inline: 32px;
+}
+.pb-32 {
+  padding-block: 32px;
+}
+
+.p-40 {
+  padding: 40px;
+}
+.pbs-40 {
+  padding-block-start: 40px;
+}
+.pbe-40 {
+  padding-block-end: 40px;
+}
+.pis-40 {
+  padding-inline-start: 40px;
+}
+.pie-40 {
+  padding-inline-end: 40px;
+}
+.pi-40 {
+  padding-inline: 40px;
+}
+.pb-40 {
+  padding-block: 40px;
+}
+
+.p-60 {
+  padding: 60px;
+}
+.pbs-60 {
+  padding-block-start: 60px;
+}
+.pbe-60 {
+  padding-block-end: 60px;
+}
+.pis-60 {
+  padding-inline-start: 60px;
+}
+.pie-60 {
+  padding-inline-end: 60px;
+}
+.pi-60 {
+  padding-inline: 60px;
+}
+.pb-60 {
+  padding-block: 60px;
+}

package/assets/styles/scaffolding/_page.css

@@ -0,0 +1,23 @@
+:root {
+  /* color-scheme: light dark; */
+}
+
+html {
+  background-color: var(--body-background-color);
+  /* background-color: light-dark(var(--light-body-background-color), var(--dark-body-background-color)); */
+
+  font-size: 62.5%;
+}
+body,
+p,
+span,
+pre,
+code,
+div,
+fieldset,
+legend,
+li,
+a {
+  font-family: var(--font-family);
+  font-size: var(--step-1);
+}

package/assets/styles/scaffolding/index.css

@@ -0,0 +1,3 @@
+@import './_page.css';
+@import './_margin-helpers.css';
+@import './_padding-helpers.css';

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

@@ -1,4 +1,4 @@
-:where(html) {
+:root {
   --blue-0: #e7f5ff;
   --blue-1: #d0ebff;
   --blue-2: #a5d8ff;
@@ -11,5 +11,5 @@
   --blue-9: #1864ab;
   --blue-10: #145591;
   --blue-11: #114678;
-  --blue-12: #0d375e;
+  --blue-12: #0e01cd;
 }

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

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

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

@@ -1,4 +1,4 @@
-:where(html) {
+:root {
   --green-0: #ebfbee;
   --green-1: #d3f9d8;
   --green-2: #b2f2bb;
@@ -11,5 +11,5 @@
   --green-9: #2b8a3e;
   --green-10: #237032;
   --green-11: #1b5727;
-  --green-12: #133d1b;
+  --green-12: #00a21e;
 }

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

@@ -1,4 +1,4 @@
-:where(html) {
+:root {
   --orange-0: #fff4e6;
   --orange-1: #ffe8cc;
   --orange-2: #ffd8a8;
@@ -11,5 +11,5 @@
   --orange-9: #d9480f;
   --orange-10: #bf400d;
   --orange-11: #99330b;
-  --orange-12: #802b09;
+  --orange-12: #db3e00;
 }

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

@@ -1,4 +1,4 @@
-:where(html) {
+:root {
   --red-0: #fff5f5;
   --red-1: #ffe3e3;
   --red-2: #ffc9c9;
@@ -11,5 +11,5 @@
   --red-9: #ff0b0b;
   --red-10: #b02525;
   --red-11: #962020;
-  --red-12: #7d1a1a;
+  --red-12: #cc0000;
 }

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

@@ -1,4 +1,4 @@
-:where(html) {
+:root {
   --yellow-0: #fff9db;
   --yellow-1: #fff3bf;
   --yellow-2: #ffec99;

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,177 @@
+<template>
+  <div class="input-error-message" :class="[elementClasses, { show: fieldHasError }, { detached: isDetached }, { hide: !fieldHasError }]">
+    <div class="inner" :class="[{ show: fieldHasError }]">
+      <div class="inner-content">
+        <div class="inner-icon">
+          <Icon name="radix-icons:circle-backslash" class="icon" />
+        </div>
+        <div class="message" :id="`${id}-error-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">
+const props = defineProps({
+  errorMessage: {
+    type: [Array, Object, String],
+    required: true,
+  },
+  fieldHasError: {
+    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,
+  },
+});
+
+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);
+
+  --_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: 0;
+  --_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: var(--theme-error-text);
+  background-color: var(--theme-error-surface);
+  border-radius: 0 0 4px 4px;
+
+  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);
+    margin-block-start: 20px;
+  }
+
+  /* &.mbs-12 {
+    transition: margin-block-start var(--_transition-duration) var(--_transition-timing-function);
+    &.hide {
+      margin-block-start: 0;
+    }
+    &.show {
+      margin-block-start: 12px;
+    }
+  } */
+
+  &.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 {
+    align-items: center;
+
+    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);
+    }
+
+    .inner-content {
+      display: flex;
+      align-items: center;
+
+      .inner-icon {
+        display: inline-block;
+        padding-left: 12px;
+
+        .icon {
+          color: white;
+          transform: translateY(3px);
+        }
+      }
+
+      .message {
+        display: inline-block;
+        flex-grow: 1;
+        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;
+
+        .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: 6px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>