pipeline and improvements

public/src/components/Input.vue

@@ -1,29 +1,71 @@
 <script setup lang="ts">
 
-import {ref} from "vue";
+import {onMounted, ref} from "vue";
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
     value: any,
     label?: string,
     disabled?: boolean,
-    type?: string
-}>()
+    type?: string,
+    dateFormat?: "string" | "number",
+    focus?: boolean
+}>(), {
+    dateFormat: "string"
+})
 
 const emit = defineEmits(["update:value"])
+const inputEl = ref<HTMLInputElement | undefined>()
 const focus = ref(false)
 
+onMounted(() => {
+    if(props.focus) {
+        inputEl.value?.focus()
+    }
+})
+
+function update($event) {
+    if(props.type == "date" && props.dateFormat == "number") {
+        console.log($event.target.value)
+        emit("update:value", new Date($event.target.value).getTime())
+    }else{
+        emit('update:value', $event.target.value)
+    }
+}
+
+function zeros(val) {
+    return val < 10 ? "0" + val : val + ""
+}
+function leading(val) {
+    let leading = ""
+    if(val < 10) leading = "000"
+    else if(val < 100) leading = "00"
+    else if(val < 1000) leading = "0"
+    return leading + val
+}
+
+function getValue(){
+    if(props.type == "date" && props.dateFormat == "number") {
+        console.log(props.value)
+        const date = new Date(props.value)
+        return leading(date.getFullYear()) + "-" + zeros(date.getMonth() + 1) + "-" + zeros(date.getDate())
+    }else{
+        return props.value
+    }
+}
+
 </script>
 
 <template>
     <div class="input">
-        <label v-if="label" :class="{up: props.value != '' || focus, focus}">{{ label }}</label>
+        <label v-if="label" :class="{up: props.value != '' || focus || type == 'date', focus}">{{ label }}</label>
         <input
-            :value="value"
-            @input="$emit('update:value', $event.target.value)"
+            :value="getValue()"
+            @input="update"
             :type="props.type ? props.type : 'text'"
             :disabled="disabled"
             @focusin="focus = true"
-            @focusout="focus = false">
+            @focusout="focus = false"
+            ref="inputEl">
     </div>
 </template>