feat(component): Add edit mode on native date object (#2086)

Author: Azurewarth0920

packages/app-frontend/src/features/inspector/DataField.vue

@@ -370,6 +370,7 @@ export default defineComponent({
           class="edit-input value-input text-black"
           :class="{ error: !valueValid }"
           list="special-tokens"
+          :type="inputType"
           @keydown.esc.capture.stop.prevent="cancelEdit()"
           @keydown.enter="submitEdit()"
         >

packages/app-frontend/src/mixins/data-field-edit.js

@@ -72,7 +72,7 @@ export default {
 
     isValueEditable () {
       const type = this.interpretedValueType
-      const customType = this.field.value?._custom?.type
+      const customType = this.customField?.type
 
       return this.isEditable &&
         (
@@ -81,16 +81,27 @@ export default {
           type === 'string' ||
           type === 'array' ||
           type === 'plain-object' ||
-          customType === 'bigint'
+          customType === 'bigint' ||
+          customType === 'date'
         )
     },
 
+    customField () {
+      return this.field.value?._custom
+    },
+
+    inputType () {
+      if (this.customField?.type === 'date') return 'datetime-local'
+      return 'text'
+    },
+
     isSubfieldsEditable () {
       return this.isEditable && (this.interpretedValueType === 'array' || this.interpretedValueType === 'plain-object')
     },
 
     valueValid () {
       try {
+        if (this.customField?.skipSerialize) return true
         parse(this.transformSpecialTokens(this.editedValue, false))
         return true
       } catch (e) {
@@ -153,14 +164,22 @@ export default {
         if (this.valueType === 'custom') {
           valueToEdit = valueToEdit._custom.value
         }
-        this.editedValue = this.transformSpecialTokens(JSON.stringify(valueToEdit), true)
+        if (this.customField?.skipSerialize) {
+          this.editedValue = valueToEdit
+        } else {
+          this.editedValue = this.transformSpecialTokens(JSON.stringify(valueToEdit), true)
+        }
+
         this.editedKey = this.field.key
         this.editing = true
         currentEditedField = this
         this.$nextTick(() => {
           const el = this.$refs[focusKey && this.renamable ? 'keyInput' : 'editInput']
-          el.focus()
-          el.setSelectionRange(0, el.value.length)
+          try {
+            el.focus()
+            // Will cause DOMEException on the datetime-local input.
+            el.setSelectionRange(0, el.value.length)
+          } catch {}
         })
       }
     },
@@ -174,13 +193,13 @@ export default {
     submitEdit () {
       if (this.editValid) {
         this.editing = false
-        let value = this.transformSpecialTokens(this.editedValue, false)
+        let value = this.customField.skipSerialize ? this.editedValue : this.transformSpecialTokens(this.editedValue, false)
         // We need to send the entire custom value data object
         if (this.valueType === 'custom') {
           value = JSON.stringify({
             _custom: {
-              ...this.field.value._custom,
-              value: JSON.parse(value), // Input
+              ...this.customField,
+              value: this.customField.skipSerialize ? value : JSON.parse(value), // Input
             },
           })
         }

packages/shared-utils/src/util.ts

@@ -227,7 +227,7 @@ function replacerForInternal (key) {
       // special handling of native type
       return `[native RegExp ${RegExp.prototype.toString.call(val)}]`
     } else if (proto === '[object Date]') {
-      return `[native Date ${Date.prototype.toString.call(val)}]`
+      return getCustomDateDetails(val)
     } else if (proto === '[object Error]') {
       return `[native Error ${val.message}<>${val.stack}]`
     } else if (val.state && val._vm) {
@@ -342,6 +342,21 @@ export function getCustomBigIntDetails (val) {
   }
 }
 
+export function getCustomDateDetails (val: Date) {
+  const dateCopy = new Date(val.getTime())
+  dateCopy.setMinutes(dateCopy.getMinutes() - dateCopy.getTimezoneOffset())
+
+  const displayedTime = Date.prototype.toString.call(val)
+  return {
+    _custom: {
+      type: 'date',
+      display: displayedTime,
+      value: dateCopy.toISOString().slice(0, -1),
+      skipSerialize: true,
+    },
+  }
+}
+
 // Use a custom basename functions instead of the shimed version
 // because it doesn't work on Windows
 function basename (filename, ext) {
@@ -512,6 +527,8 @@ export function revive (val) {
       return reviveSet(val)
     } else if (custom.type === 'bigint') {
       return BigInt(custom.value)
+    } else if (custom.type === 'date') {
+      return new Date(custom.value)
     } else if (custom._reviveId) {
       return reviveCache.read(custom._reviveId)
     } else {

packages/shell-dev-vue3/src/NativeTypes.vue

@@ -30,6 +30,9 @@
 
     <h3>BigInt</h3>
     <pre>{{ bigInt }}</pre>
+
+    <h3>Date</h3>
+    <pre>{{ localDate }}</pre>
   </div>
 </template>