srcdev-nuxt-forms 0.0.20 → 0.0.22

package/assets/styles/forms/index.css

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

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

@@ -0,0 +1,3 @@
+:where(html) {
+  --primary-border-default: var(--blue-8);
+}

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

@@ -0,0 +1 @@
+@import './_primary.css';

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

@@ -1,25 +1,9 @@
 :root {
-  --form-bg-color: #f9f9f9; /* Background color for form */
-  --form-border-color: #cccccc; /* Border color for form elements */
-  --form-text-color: #333333; /* Text color for form elements */
-  --form-placeholder-color: #888888; /* Placeholder text color */
-  --form-focus-border-color: #0076c6; /* Border color on focus */
-  --form-button-bg-color: #0076c6; /* Button background color */
-  --form-button-text-color: #ffffff; /* Button text color */
-  --form-error-color: #ce0606; /* Error message color */
-  --form-success-color: #008000; /* Success message color */
-  --form-warning-color: #ffcc00; /* Warning message color */
-  --form-info-color: #0076c6; /* Info message color */
-  --form-required-color: #ce0606; /* Required field color */
-  --form-disabled-color: #cccccc; /* Disabled field color */
-  --form-disabled-bg-color: #f9f9f9; /* Disabled field background color */
-  --form-disabled-border-color: #cccccc; /* Disabled field border color */
-  --form-disabled-text-color: #999999; /* Disabled field text color */
-
-  --input-border: #121212;
-
   --input-border-radius: 4px;
-
   --input-border-width-thin: 1px;
-  --input-border-width-thick: 2px;
+  --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;
 }

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,24 @@
 <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 }, { dirty: isDirty }]"
+      :for="id"
+      >{{ c12.label }}</label
+    >
+    <div class="input-text-container">
+      <InputTextCore
+        :id
+        :name
+        :type
+        :validation
+        :required
+        v-model="modelValue"
+        v-model:isFocused="isFocused"
+        :c12
+        :style-class-passthrough="styleClassPassthrough"
+      />
+    </div>
   </div>
 </template>
 
@@ -59,30 +67,92 @@ 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);
+const isDirty = computed(() => {
+  return modelValue.value.data[name.value] !== '';
+});
 </script>
 
 <style lang="css">
 .input-text-material {
-  display: flex;
-  flex-direction: column;
+  input {
+    background-color: transparent;
+    &:focus {
+      outline: none;
+      box-shadow: none;
+      border: none;
+    }
+  }
+
+  --_gutter: 12px;
+  --_border-default: var(--primary-border-default);
+  --_border-width: var(--input-border-width-default);
 
-  border: 1px solid black;
+  display: grid;
   border-radius: 2px;
+  outline: var(--_border-width) solid var(--_border-default);
 
   margin-bottom: 20px;
+  overflow: hidden;
+
+  &:focus-within {
+    outline: calc(var(--_border-width) * 2) solid var(--_border-default);
+    background-color: hsl(from var(--_border-default) h s 95%);
+  }
 
-  .input-text {
-    border: 1px solid red;
-    margin: 5px;
+  .label {
+    grid-row: 1;
+    grid-column: 1;
 
-    /* &::placeholder,
+    font-family: var(--font-family);
+    font-size: 20px;
+    font-weight: 700;
+    padding: var(--_gutter);
+    transform: translateY(10px);
+    transition: all linear 0.2s;
+    background-color: transparent;
+
+    &.active,
+    &.dirty {
+      font-size: 14px;
+      transform: translateY(0);
+    }
+  }
+
+  .input-text-container {
+    display: grid;
+    grid-row: 1;
+    grid-column: 1;
+    margin-top: 2rem;
+    background-color: transparent;
+
+    .input-text {
+      font-family: var(--font-family);
+      border: 0px solid green;
+      padding: calc(var(--_gutter) / 2) var(--_gutter);
+      font-size: 16px;
+      margin: 0;
+
+      /* &::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: 0px 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.22",
   "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;
-}