srcdev-nuxt-forms 0.0.19 → 0.0.20

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

@@ -0,0 +1,15 @@
+:where(html) {
+  --blue-0: #e7f5ff;
+  --blue-1: #d0ebff;
+  --blue-2: #a5d8ff;
+  --blue-3: #74c0fc;
+  --blue-4: #4dabf7;
+  --blue-5: #339af0;
+  --blue-6: #228be6;
+  --blue-7: #1c7ed6;
+  --blue-8: #1971c2;
+  --blue-9: #1864ab;
+  --blue-10: #145591;
+  --blue-11: #114678;
+  --blue-12: #0d375e;
+}

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

@@ -0,0 +1,15 @@
+:where(html) {
+  --green-0: #ebfbee;
+  --green-1: #d3f9d8;
+  --green-2: #b2f2bb;
+  --green-3: #8ce99a;
+  --green-4: #69db7c;
+  --green-5: #51cf66;
+  --green-6: #40c057;
+  --green-7: #37b24d;
+  --green-8: #2f9e44;
+  --green-9: #2b8a3e;
+  --green-10: #237032;
+  --green-11: #1b5727;
+  --green-12: #133d1b;
+}

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

@@ -0,0 +1,15 @@
+:where(html) {
+  --gray-0: #f8f9fa;
+  --gray-1: #f1f3f5;
+  --gray-2: #e9ecef;
+  --gray-3: #dee2e6;
+  --gray-4: #ced4da;
+  --gray-5: #adb5bd;
+  --gray-6: #868e96;
+  --gray-7: #495057;
+  --gray-8: #343a40;
+  --gray-9: #212529;
+  --gray-10: #16191d;
+  --gray-11: #0d0f12;
+  --gray-12: #030507;
+}

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

@@ -0,0 +1,15 @@
+:where(html) {
+  --orange-0: #fff4e6;
+  --orange-1: #ffe8cc;
+  --orange-2: #ffd8a8;
+  --orange-3: #ffc078;
+  --orange-4: #ffa94d;
+  --orange-5: #ff922b;
+  --orange-6: #fd7e14;
+  --orange-7: #f76707;
+  --orange-8: #e8590c;
+  --orange-9: #d9480f;
+  --orange-10: #bf400d;
+  --orange-11: #99330b;
+  --orange-12: #802b09;
+}

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

@@ -0,0 +1,15 @@
+:where(html) {
+  --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: #c92a2a;
+  --red-10: #b02525;
+  --red-11: #962020;
+  --red-12: #7d1a1a;
+}

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

@@ -0,0 +1,15 @@
+:where(html) {
+  --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/index.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

@@ -1 +1 @@
-@import "./_colours.css";
+@import './_colours/index.css';

package/components/forms/input-text/InputTextCore.vue

@@ -85,9 +85,12 @@ const fieldHasError = () => {
   return false;
 };
 
-// watchEffect(() => {
-//   console.log('Form value changed to: ', modelValue.value.data[name.value]);
-// });
+watchEffect(() => {
+  console.log(
+    'InputTextCore >> Form value changed to: ',
+    modelValue.value.data[name.value]
+  );
+});
 
 const isValid = () => {
   setTimeout(() => {
@@ -115,9 +118,7 @@ onMounted(() => {
 </script>
 
 <style lang="css">
-.input-text {
+/* .input-text {
   transition: all linear 200ms;
-  padding-left: 4px;
-  width: 100%;
-}
+} */
 </style>

package/components/forms/input-text/variants/InputTextMaterial.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="input-text-material">
+    <label :for="id">{{ c12.label }}</label>
+    <InputTextCore
+      :id
+      :name
+      :type
+      :validation
+      :required
+      v-model="modelValue"
+      v-model:isFocused="isFocused"
+      :c12
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { InpuTextC12, IFormData } from '@/types/types.forms';
+import { validationConfig } from '@/components/forms/c12/validation-patterns';
+
+const props = defineProps({
+  type: {
+    // type: String as PropType<"text" | "password" | "tel" | "number" | "email" | "url">, // This breaks props setup in unit tests
+    type: String,
+    validator(value: string) {
+      return ['text', 'password', 'tel', 'number', 'email', 'url'].includes(
+        value
+      );
+    },
+  },
+  id: {
+    // type: String as PropType<string>,
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    default: null,
+  },
+  validation: {
+    type: String,
+    default: '',
+  },
+  required: {
+    type: Boolean,
+    value: false,
+  },
+  isPending: {
+    type: Boolean,
+    value: false,
+  },
+  c12: {
+    type: Object as PropType<InpuTextC12>,
+    required: true,
+  },
+});
+
+const name = computed(() => {
+  return props.name !== null ? props.name : props.id;
+});
+
+const modelValue = defineModel() as Ref<IFormData>;
+const isFocused = ref(false);
+</script>
+
+<style lang="css">
+.input-text-material {
+  display: flex;
+  flex-direction: column;
+
+  border: 1px solid black;
+  border-radius: 2px;
+
+  margin-bottom: 20px;
+
+  .input-text {
+    border: 1px solid red;
+    margin: 5px;
+
+    /* &::placeholder,
+    &:-ms-input-placeholder,
+    &::-moz-placeholder, */
+    &::-webkit-input-placeholder {
+      color: rgb(128, 0, 117);
+      font-size: 30px;
+    }
+  }
+}
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "main": "./nuxt.config.ts",
   "scripts": {
     "reinstall": "rm -rf node_modules && npm install",

package/pages/index.vue

@@ -12,17 +12,18 @@
                 <FormField width="wide" :has-gutter="true">
                   <template #default>
                     <p>Input text</p>
-                    <InputTextCore
+                    <InputTextMaterial
                       id="username"
+                      name="username"
                       type="text"
                       validation="username"
                       :required="true"
-                      v-model="formData"
                       :c12="{
                         label: 'Choose Username',
                         placeholder: 'eg. YourUserName',
                         errorMessage: 'Please enter a valid username',
                       }"
+                      v-model="formData"
                     />
                   </template>
                 </FormField>