ui_migration fix(deps): --preliminary-- Replace value to modelvalue, and global emitters. BUG:keys-arrows-wont-move

This commit is contained in:
Antonio Anaya 2026-01-25 02:07:46 -06:00
parent 2a9ee759c4
commit 0296cef089
12 changed files with 165 additions and 62 deletions

View file

@ -115,9 +115,10 @@ export default {
type: Object,
required: true,
},
value: {
modelValue: {
type: null,
required: true,
required: false,
default: undefined,
},
label: {
type: String,
@ -135,11 +136,11 @@ export default {
// the value is an array or object. For future updates we stringify and parse
// (see resetInternalValue). If we do this here there is a chance we get errors
// as internalValue is still null when rendering starts.
internalValue: Array.isArray(this.value)
? [...this.value]
: typeof this.value === "object"
? { ...this.value }
: this.value,
internalValue: Array.isArray(this.modelValue)
? [...this.modelValue]
: typeof this.modelValue === "object"
? { ...this.modelValue }
: this.modelValue,
// Is edited can't be computed as we mutate internalValue
isEdited: false,
animateUpdate: false,
@ -208,14 +209,20 @@ export default {
},
watch: {
value() {
// Fire updateIsEdited on both value and internal value change,
// as change in value may not causse internalValue to change.
this.updateIsEdited();
this.resetInternalValue();
modelValue: {
handler() {
// Fire updateIsEdited on both value and internal value change,
// as change in value may not causse internalValue to change.
this.updateIsEdited();
this.resetInternalValue();
},
deep: true,
},
internalValue() {
this.updateIsEdited();
internalValue: {
handler() {
this.updateIsEdited();
},
deep: true,
},
animate(updated) {
if (updated) {
@ -225,7 +232,7 @@ export default {
},
mounted() {
if (this.value !== undefined) {
if (this.modelValue !== undefined) {
this.resetInternalValue();
}
},
@ -235,7 +242,7 @@ export default {
// Whenever updatirng th internal value stringify and parse as a form of deepcopy.
// This ensure that the this.value prop is not mutated for when elements of arrays
// or objects are updated.
this.internalValue = JSON.parse(JSON.stringify(this.value));
this.internalValue = JSON.parse(JSON.stringify(this.modelValue));
},
requestUpdate: async function () {
this.$emit("requestUpdate");
@ -264,7 +271,7 @@ export default {
}
},
updateIsEdited: function () {
this.isEdited = this.deepStringify(this.internalValue) !== this.deepStringify(this.value);
this.isEdited = this.deepStringify(this.internalValue) !== this.deepStringify(this.modelValue);
},
animationEnd: function () {
this.animateUpdate = false;