wip migration

components/FormInput.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="form-input">
+    <label
+      >{{ labelText + (required ? '*' : '') }}
+      <input
+        v-model="inputValue"
+        :required="required"
+        :type="type"
+        :step="step"
+        :placeholder="placeholder"
+        @input="handleInput"
+      />
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    labelText: {
+      type: String,
+      default: '',
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: String,
+      default: '',
+    },
+    step: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: [Number, String],
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['input'],
+  data() {
+    return {
+      inputValue: this.value,
+    }
+  },
+  methods: {
+    handleInput() {
+      this.$emit('input', this.inputValue)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.form-input {
+  // width: 100%; //Utilizar este width para controlar el ancho desde el elemento padre
+  width: 45%;
+  @include mobile {
+    width: 80%;
+  }
+  // @include desktop {
+  //   width: 25%;
+  // }
+}
+input {
+  width: 100%;
+  background-color: $color-grey-inputs;
+  border: 1px solid $color-grey-inputs-border;
+  border-radius: 4px;
+  padding: 10px 5px;
+  display: block;
+  margin-bottom: 10px;
+  font-weight: $regular;
+  outline: none;
+}
+
+label {
+  text-align: left;
+  color: $color-navy;
+  font-weight: $bold;
+  font-size: $xs;
+  display: block;
+}
+</style>