srcdev-nuxt-forms 0.0.19 → 0.0.21

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

@@ -22,4 +22,7 @@
 
   --input-border-width-thin: 1px;
   --input-border-width-thick: 2px;
+
+  --font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri,
+    'DejaVu Sans', source-sans-pro, sans-serif;
 }

package/assets/styles/main.css

@@ -1 +1,2 @@
-@import "./forms/index.css";
+@import './variables';
+@import './forms';

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/_gray.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/_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/_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 './colors/index.css';

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

@@ -7,7 +7,12 @@
     :pattern="componentValidation.pattern"
     :maxlength="componentValidation.maxlength"
     :required
-    :class="['input-text', 'text-normal', { error: fieldHasError() }]"
+    :class="[
+      'input-text',
+      'text-normal',
+      styleClassPassthrough,
+      { error: fieldHasError() },
+    ]"
     v-model="modelValue.data[name]"
     ref="inputField"
     @focusin="isFocused = true"
@@ -54,6 +59,10 @@ const props = defineProps({
     type: Object as PropType<InpuTextC12>,
     required: true,
   },
+  styleClassPassthrough: {
+    type: String,
+    default: '',
+  },
 });
 
 const modelValue = defineModel() as Ref<IFormData>;
@@ -85,9 +94,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 +127,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,144 @@
+<template>
+  <div class="input-text-material">
+    <label class="label" :class="[{ active: isFocused }]" :for="id"
+      >{{ c12.label }} - isFocused({{ isFocused }})</label
+    >
+    <div class="input-placeholder">
+      <InputTextCore
+        :id
+        :name
+        :type
+        :validation
+        :required
+        v-model="modelValue"
+        v-model:isFocused="isFocused"
+        :c12
+        :style-class-passthrough="styleClassPassthrough"
+      />
+    </div>
+  </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 styleClassPassthrough = computed(() => {
+  return isFocused.value ? 'is-active' : '';
+});
+
+const modelValue = defineModel() as Ref<IFormData>;
+const isFocused = ref(false);
+</script>
+
+<style lang="css">
+.input-text-material {
+  --_gutter: 12px;
+
+  display: grid;
+  grid-template-columns: 1fr;
+  /* grid-template-rows: var(--_gutter) 1fr var(--_gutter); */
+  grid-template-rows: var(--_gutter) 1fr var(--_gutter);
+  gap: calc(var(--_gutter) / 2);
+
+  border: 1px solid red;
+  border-radius: 2px;
+
+  margin-bottom: 20px;
+  /* padding: calc(2 * var(--_gutter)); */
+
+  .label {
+    grid-row: 2;
+    grid-column: 1;
+
+    font-family: var(--font-family);
+    font-size: 16px;
+    font-weight: 700;
+    padding: var(--_gutter);
+    /* transform: translateY(12px); */
+
+    z-index: 2;
+
+    transition: all linear 0.2s;
+
+    &.active {
+      grid-row: 1;
+      grid-column: 1;
+      /* padding: 0; */
+      transform: translateY(-10px);
+    }
+  }
+
+  .input-placeholder {
+    grid-row: 2;
+    grid-column: 1;
+    align-content: center;
+    padding-inline: var(--_gutter);
+    transform: translateY(12px);
+
+    .input-text {
+      font-family: var(--font-family);
+      border: 0px solid green;
+      padding: var(--_gutter);
+      font-size: 16px;
+
+      /* &::placeholder,
+    &:-ms-input-placeholder,
+    &::-moz-placeholder, */
+      &::-webkit-input-placeholder {
+        font-family: var(--font-family);
+        color: var(--gray-5);
+        font-size: 14px;
+        font-style: italic;
+        font-weight: 700;
+        opacity: 0;
+
+        &.is-active {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+</style>

package/components/forms/ui/FormField.vue

@@ -16,7 +16,7 @@ defineProps({
     type: Boolean as PropType<boolean>,
     default: true,
   },
-})
+});
 </script>
 
 <style lang="css">
@@ -26,7 +26,7 @@ defineProps({
 
   margin-inline: auto;
   width: min(100% - calc(2 * var(--_gutter-width)), var(--_max-width));
-  outline: 1px solid #571818;
+  outline: 1px solid var(--gray-5);
 
   &.has-gutter {
     --_gutter-width: 16px;

package/components/forms/ui/FormWrapper.vue

@@ -12,12 +12,12 @@ defineProps({
     default: 'narrow',
     validator: (val: string) => ['narrow', 'medium', 'wide'].includes(val),
   },
-})
+});
 </script>
 
 <style lang="css">
 .form-wrapper {
-  outline: 1px solid #000;
+  outline: 1px solid var(--gray-12);
 
   &.narrow {
     max-width: 400px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "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>

package/assets/styles/variables/_colours.css

@@ -1,10 +0,0 @@
-:root {
-    --colour-primary: #ff0000;
-    --colour-secondary: #00ff00;
-    --colour-tertiary: #0000ff;
-    --colour-quaternary: #ffff00;
-    --colour-quinary: #ff00ff;
-    --colour-senary: #00ffff;
-    --colour-septenary: #000000;
-    --colour-octonary: #ffffff;
-}