diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue index e24eaf3c..b3ea5191 100644 --- a/src/components/home/navigation.vue +++ b/src/components/home/navigation.vue @@ -84,8 +84,8 @@ --> { - this.$emit('input', this.color) + this.$emit('update:modelValue', this.color) this.$emit('change') }, 500) }, diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue index 932c77bc..dbfb05e6 100644 --- a/src/components/input/datepicker.vue +++ b/src/components/input/datepicker.vue @@ -136,7 +136,7 @@ export default { flatPickr, }, props: { - value: { + modelValue: { validator: prop => prop instanceof Date || prop === null || typeof prop === 'string', }, chooseDateLabel: { @@ -150,6 +150,7 @@ export default { default: false, }, }, + emits: ['update:modelValue', 'change', 'close', 'close-on-change'], mounted() { document.addEventListener('click', this.hideDatePopup) }, @@ -157,7 +158,7 @@ export default { document.removeEventListener('click', this.hideDatePopup) }, watch: { - value: { + modelValue: { handler: 'setDateValue', immediate: true, }, @@ -191,7 +192,7 @@ export default { }, updateData() { this.changed = true - this.$emit('input', this.date) + this.$emit('update:modelValue', this.date) this.$emit('change', this.date) }, toggleDatePopup() { diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue index 03dff482..5d4db643 100644 --- a/src/components/input/editor.vue +++ b/src/components/input/editor.vue @@ -5,7 +5,7 @@ @@ -61,7 +61,7 @@ export default { VueEasymde, }, props: { - value: { + modelValue: { type: String, default: '', }, @@ -101,6 +101,7 @@ export default { default: false, }, }, + emits: ['update:modelValue', 'change'], computed: { showPreviewText() { return this.isPreviewActive && this.text === '' && this.emptyText !== '' @@ -249,21 +250,21 @@ export default { } }, watch: { - value(newVal) { - this.text = newVal + modelValue(modelValue) { + this.text = modelValue this.$nextTick(this.renderPreview) }, text(newVal, oldVal) { // Only bubble the new value if it actually changed, but not if the component just got mounted and the text changed from the outside. - if (oldVal === '' && this.text === this.value) { + if (oldVal === '' && this.text === this.modelValue) { return } this.bubble() }, }, mounted() { - if (this.value !== '') { - this.text = this.value + if (this.modelValue !== '') { + this.text = this.modelValue } if (this.previewIsDefault && this.hasPreview) { @@ -296,7 +297,7 @@ export default { } this.changeTimeout = setTimeout(() => { - this.$emit('input', this.text) + this.$emit('update:modelValue',this.text) this.$emit('change', this.text) }, timeout) }, diff --git a/src/components/input/fancycheckbox.vue b/src/components/input/fancycheckbox.vue index b39a7736..9d22f844 100644 --- a/src/components/input/fancycheckbox.vue +++ b/src/components/input/fancycheckbox.vue @@ -30,7 +30,7 @@ export default { } }, props: { - value: { + modelValue: { required: false, }, disabled: { @@ -39,10 +39,11 @@ export default { default: false, }, }, + emits: ['update:modelValue', 'change'], watch: { - value: { - handler(value) { - this.checked = value + modelValue: { + handler(modelValue) { + this.checked = modelValue }, immediate: true, @@ -51,7 +52,7 @@ export default { methods: { updateData(checked) { this.checked = checked - this.$emit('input', checked) + this.$emit('update:modelValue', checked) this.$emit('change', checked) }, }, diff --git a/src/components/input/multiselect.vue b/src/components/input/multiselect.vue index 45ab76bc..ff4d9f97 100644 --- a/src/components/input/multiselect.vue +++ b/src/components/input/multiselect.vue @@ -83,14 +83,6 @@ diff --git a/src/components/misc/create-edit.vue b/src/components/misc/create-edit.vue index c98378d8..4acbfd55 100644 --- a/src/components/misc/create-edit.vue +++ b/src/components/misc/create-edit.vue @@ -77,6 +77,7 @@ export default { default: false, }, }, + emits: ['create', 'primary', 'tertary'], methods: { primary() { this.$emit('create') diff --git a/src/components/misc/dropdown.vue b/src/components/misc/dropdown.vue index 4bd2c6b2..b27ff3cb 100644 --- a/src/components/misc/dropdown.vue +++ b/src/components/misc/dropdown.vue @@ -37,6 +37,7 @@ export default { default: 'ellipsis-h', }, }, + emits: ['close'], methods: { hide(e) { if (this.open) { diff --git a/src/components/misc/subscription.vue b/src/components/misc/subscription.vue index 294aeee4..f29091c6 100644 --- a/src/components/misc/subscription.vue +++ b/src/components/misc/subscription.vue @@ -49,6 +49,7 @@ export default { default: true, }, }, + emits: ['change'], computed: { tooltipText() { if (this.disabled) { diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue index 020e33b2..78ce84ed 100644 --- a/src/components/modal/modal.vue +++ b/src/components/modal/modal.vue @@ -102,6 +102,7 @@ export default { validator: validValue(VARIANTS), }, }, + emits: ['close', 'submit'], } diff --git a/src/components/namespace/namespace-search.vue b/src/components/namespace/namespace-search.vue index 8db1097c..cbe424d2 100644 --- a/src/components/namespace/namespace-search.vue +++ b/src/components/namespace/namespace-search.vue @@ -14,6 +14,7 @@ import Multiselect from '@/components/input/multiselect.vue' export default { name: 'namespace-search', + emits: ['selected'], data() { return { query: '', diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue index 1f16e692..3688d7bc 100644 --- a/src/components/tasks/add-task.vue +++ b/src/components/tasks/add-task.vue @@ -49,6 +49,7 @@ const cleanupTitle = title => { export default { name: 'add-task', + emits: ['taskAdded'], data() { return { newTaskTitle: '', diff --git a/src/components/tasks/partials/defer-task.vue b/src/components/tasks/partials/defer-task.vue index 4f17bf79..2e66b501 100644 --- a/src/components/tasks/partials/defer-task.vue +++ b/src/components/tasks/partials/defer-task.vue @@ -57,12 +57,14 @@ export default { flatPickr, }, props: { - value: { + modelValue: { required: true, }, }, + emits: ['update:modelValue'], + watch: { - value: { + modelValue: { handler(value) { this.task = value this.dueDate = value.dueDate @@ -125,7 +127,7 @@ export default { .then((r) => { this.lastValue = r.dueDate this.task = r - this.$emit('input', r) + this.$emit('update:modelValue', r) }) .catch((e) => { this.$message.error(e) diff --git a/src/components/tasks/partials/description.vue b/src/components/tasks/partials/description.vue index 89b5ec72..86ce4316 100644 --- a/src/components/tasks/partials/description.vue +++ b/src/components/tasks/partials/description.vue @@ -57,7 +57,7 @@ export default { loading: LOADING, }), props: { - value: { + modelValue: { required: true, }, attachmentUpload: { @@ -67,8 +67,9 @@ export default { required: true, }, }, + emits: ['update:modelValue'], watch: { - value: { + modelValue: { handler(value) { this.task = value }, @@ -82,7 +83,7 @@ export default { this.$store.dispatch('tasks/update', this.task) .then(t => { this.task = t - this.$emit('input', t) + this.$emit('update:modelValue', t) this.saved = true setTimeout(() => { this.saved = false diff --git a/src/components/tasks/partials/editAssignees.vue b/src/components/tasks/partials/editAssignees.vue index 3df12441..c6dddf09 100644 --- a/src/components/tasks/partials/editAssignees.vue +++ b/src/components/tasks/partials/editAssignees.vue @@ -55,10 +55,11 @@ export default { disabled: { default: false, }, - value: { + modelValue: { type: Array, }, }, + emits: ['update:modelValue'], data() { return { newAssignee: new UserModel(), @@ -69,7 +70,7 @@ export default { } }, watch: { - value: { + modelValue: { handler(value) { this.assignees = value }, @@ -80,7 +81,7 @@ export default { addAssignee(user) { this.$store.dispatch('tasks/addAssignee', {user: user, taskId: this.taskId}) .then(() => { - this.$emit('input', this.assignees) + this.$emit('update:modelValue', this.assignees) this.$message.success({message: this.$t('task.assignee.assignSuccess')}) }) .catch(e => { diff --git a/src/components/tasks/partials/editLabels.vue b/src/components/tasks/partials/editLabels.vue index 838ca25e..a2f4f3c1 100644 --- a/src/components/tasks/partials/editLabels.vue +++ b/src/components/tasks/partials/editLabels.vue @@ -49,7 +49,7 @@ import {LOADING, LOADING_MODULE} from '@/store/mutation-types' export default { name: 'edit-labels', props: { - value: { + modelValue: { default: () => [], type: Array, }, @@ -62,6 +62,7 @@ export default { default: false, }, }, + emits: ['update:modelValue', 'change'], data() { return { labelTaskService: new LabelTaskService(), @@ -74,7 +75,7 @@ export default { Multiselect, }, watch: { - value: { + modelValue: { handler(value) { this.labels = value }, @@ -101,7 +102,7 @@ export default { }, addLabel(label, showNotification = true) { const bubble = () => { - this.$emit('input', this.labels) + this.$emit('update:modelValue', this.labels) this.$emit('change', this.labels) } @@ -128,7 +129,7 @@ export default { this.labels.splice(l, 1) } } - this.$emit('input', this.labels) + this.$emit('update:modelValue', this.labels) this.$emit('change', this.labels) } diff --git a/src/components/tasks/partials/heading.vue b/src/components/tasks/partials/heading.vue index 96f76d44..55f86f58 100644 --- a/src/components/tasks/partials/heading.vue +++ b/src/components/tasks/partials/heading.vue @@ -39,14 +39,14 @@ export default { computed: { ...mapState(['loading']), task() { - return this.value + return this.modelValue }, textIdentifier() { return this.task?.getTextIdentifier() || '' }, }, props: { - value: { + modelValue: { required: true, }, canWrite: { @@ -54,6 +54,9 @@ export default { default: false, }, }, + + emits: ['update:modelValue'], + methods: { save(title) { // We only want to save if the title was actually changed. @@ -73,7 +76,7 @@ export default { this.$store.dispatch('tasks/update', newTask) .then((task) => { - this.$emit('input', task) + this.$emit('update:modelValue', task) this.showSavedMessage = true setTimeout(() => { this.showSavedMessage = false diff --git a/src/components/tasks/partials/listSearch.vue b/src/components/tasks/partials/listSearch.vue index a6b49b62..e74bc315 100644 --- a/src/components/tasks/partials/listSearch.vue +++ b/src/components/tasks/partials/listSearch.vue @@ -32,15 +32,16 @@ export default { } }, props: { - value: { + modelValue: { required: false, }, }, + emits: ['update:modelValue', 'selected'], components: { Multiselect, }, watch: { - value: { + modelValue: { handler(value) { this.list = value }, @@ -68,7 +69,7 @@ export default { select(list) { this.list = list this.$emit('selected', list) - this.$emit('input', list) + this.$emit('update:modelValue', list) }, namespace(namespaceId) { const namespace = this.$store.getters['namespaces/getNamespaceById'](namespaceId) diff --git a/src/components/tasks/partials/percentDoneSelect.vue b/src/components/tasks/partials/percentDoneSelect.vue index a942a6f0..b3541699 100644 --- a/src/components/tasks/partials/percentDoneSelect.vue +++ b/src/components/tasks/partials/percentDoneSelect.vue @@ -1,6 +1,6 @@