fix timestamp-form

forms/TimestampForm.vue

@@ -2,20 +2,18 @@
   <form class="timestamp-form">
     <div class="timestamp-form__input">
       <h3>{{ $t('timestamp-form.input-title') }}</h3>
-      <div class="timestamp-form__input-fields">
-        <input-field
-          v-model="form.timestamp"
-          type="number"
-          :label="$t('timestamp-form.timestamp-label')"
-          :placeholder="$t('timestamp-form.timestamp-placeholder')"
-          :error-message="getFieldErrorMessage('timestamp')"
-          @blur="touchField('timestamp')"
-        />
-      </div>
+      <input-field
+        v-model="form.timestamp"
+        type="number"
+        :label="$t('timestamp-form.timestamp-label')"
+        :placeholder="$t('timestamp-form.timestamp-placeholder')"
+        :error-message="getFieldErrorMessage('timestamp')"
+        @blur="touchField('timestamp')"
+      />
     </div>
     <div class="timestamp-form__output">
       <h3>{{ $t('timestamp-form.output-title') }}</h3>
-      <div v-for="(item, idx) in outputItems" :key="`${item.label}-${idx}`">
+      <div v-for="(item, idx) in outputItems" :key="idx">
         <p class="timestamp-form__output-item-label">
           {{ item.label }}
         </p>
@@ -33,47 +31,55 @@
 import { AppCopy } from '#components'
 import { useFormValidation } from '@/composables'
 import { InputField } from '@/fields'
-import { integer, maxLength, minValue, required } from '@/helpers'
+import { integer, maxValue, minValue, required } from '@/helpers'
 import { Time } from '@distributedlab/tools'
 import { computed, reactive } from 'vue'
 import { i18n } from '~/plugins/localization'
 
 const { t } = i18n.global
 
 const form = reactive({
-  timestamp: new Time().timestamp,
+  timestamp: String(new Time().timestamp),
 })
 
-const { isFieldsValid, getFieldErrorMessage, touchField } = useFormValidation(
+const { getFieldErrorMessage, isFormValid, touchField } = useFormValidation(
   form,
   {
     timestamp: {
       required,
       integer,
-      minValue: minValue(0),
-      maxLength: maxLength(13),
+
+      /**
+       * Date object with less than this min timestamp (05/02/1924)
+       * works incorrectly
+       */
+      minValue: minValue(-1441152000),
+
+      maxValue: maxValue(8640000000000),
     },
   },
 )
 
-const time = computed(() => new Time(Number(form.timestamp)))
-const isValidTime = computed(() => time.value.isValid && isFieldsValid.value)
+const time = computed<Time | null>(() =>
+  isFormValid() ? new Time(Number(form.timestamp)) : null,
+)
+
 const outputItems = computed(() => [
   {
     label: t('timestamp-form.format-label'),
     value: t('timestamp-form.format-value'),
   },
   {
     label: t('timestamp-form.gmt-label'),
-    value: isValidTime.value ? time.value.toDate().toUTCString() : '',
+    value: time.value ? time.value.toDate().toUTCString() : '',
   },
   {
     label: t('timestamp-form.time-zone-label'),
-    value: isValidTime.value ? time.value.toDate().toString() : '',
+    value: time.value ? time.value.toDate().toString() : '',
   },
   {
     label: t('timestamp-form.relative-time-label'),
-    value: isValidTime.value ? time.value.toNow : '',
+    value: time.value ? time.value.fromNow : '',
   },
 ])
 </script>
@@ -95,12 +101,6 @@ const outputItems = computed(() => [
   border-bottom: toRem(1) solid var(--border-primary-main);
 }
 
-.timestamp-form__input-fields {
-  display: flex;
-  flex-direction: column;
-  gap: toRem(16);
-}
-
 .timestamp-form__output-item-label {
   @include field-label;
 }