srcdev-nuxt-forms 0.0.20 → 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/index.css

@@ -1 +1 @@
-@import './_colours/index.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>;

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

@@ -1,16 +1,21 @@
 <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
-    />
+    <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>
 
@@ -59,30 +64,80 @@ 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 {
-  display: flex;
-  flex-direction: column;
+  --_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 black;
+  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;
 
-  .input-text {
-    border: 1px solid red;
-    margin: 5px;
+    transition: all linear 0.2s;
 
-    /* &::placeholder,
+    &.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 {
-      color: rgb(128, 0, 117);
-      font-size: 30px;
+      &::-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;
+        }
+      }
     }
   }
 }

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.20",
+  "version": "0.0.21",
   "main": "./nuxt.config.ts",
   "scripts": {
     "reinstall": "rm -rf node_modules && npm install",

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;
-}