diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue index 82e0cd5e3..229af9251 100644 --- a/src/components/base/BaseButton.vue +++ b/src/components/base/BaseButton.vue @@ -74,6 +74,7 @@ export interface BaseButtonEmits { (e: 'click', payload: MouseEvent): void } +// eslint-disable-next-line vue/no-dupe-keys const { type = BASE_BUTTON_TYPES_MAP.BUTTON, disabled = false, diff --git a/src/components/input/ColorPicker.vue b/src/components/input/ColorPicker.vue index 5f71426a8..fad005d35 100644 --- a/src/components/input/ColorPicker.vue +++ b/src/components/input/ColorPicker.vue @@ -66,9 +66,9 @@ const props = defineProps({ const emit = defineEmits(['update:modelValue']) -const modelValue = toRef(props, 'modelValue') +const modelValueRef = toRef(props, 'modelValue') watch( - modelValue, + modelValueRef, (newValue) => { color.value = newValue }, diff --git a/src/components/input/button.vue b/src/components/input/button.vue index 3625d6530..fb14862dd 100644 --- a/src/components/input/button.vue +++ b/src/components/input/button.vue @@ -56,6 +56,7 @@ export interface ButtonProps extends BaseButtonProps { wrap?: boolean } +// eslint-disable-next-line vue/no-dupe-keys const { variant = 'primary', icon = '', diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue index bc72ee73b..d32ac6a01 100644 --- a/src/components/input/datepicker.vue +++ b/src/components/input/datepicker.vue @@ -134,9 +134,9 @@ const changed = ref(false) onMounted(() => document.addEventListener('click', hideDatePopup)) onBeforeUnmount(() =>document.removeEventListener('click', hideDatePopup)) -const modelValue = toRef(props, 'modelValue') +const modelValueRef = toRef(props, 'modelValue') watch( - modelValue, + modelValueRef, setDateValue, {immediate: true}, ) diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue index 6affdf96e..cef58ee30 100644 --- a/src/components/input/editor.vue +++ b/src/components/input/editor.vue @@ -157,10 +157,10 @@ const config = ref(createEasyMDEConfig({ const checkboxId = ref(createRandomID()) -const {modelValue} = toRefs(props) +const {modelValue: modelValueRef} = toRefs(props) watch( - modelValue, + modelValueRef, async (value) => { text.value = value await nextTick() @@ -172,7 +172,7 @@ watch( 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 === '' && text.value === modelValue.value) { + if (oldVal === '' && text.value === modelValueRef.value) { return } bubble() @@ -181,8 +181,8 @@ watch( onMounted(() => { - if (modelValue.value !== '') { - text.value = modelValue.value + if (modelValueRef.value !== '') { + text.value = modelValueRef.value } if (props.previewIsDefault && props.hasPreview) { diff --git a/src/components/input/multiselect.vue b/src/components/input/multiselect.vue index b3b0c291d..b93871f50 100644 --- a/src/components/input/multiselect.vue +++ b/src/components/input/multiselect.vue @@ -227,10 +227,10 @@ const internalValue = ref(null) onMounted(() => document.addEventListener('click', hideSearchResultsHandler)) onBeforeUnmount(() => document.removeEventListener('click', hideSearchResultsHandler)) -const {modelValue, searchResults} = toRefs(props) +const {modelValue: modelValueRef, searchResults: searchResultsRef} = toRefs(props) watch( - modelValue, + modelValueRef, (value) => setSelectedObject(value), { immediate: true, @@ -261,10 +261,10 @@ const creatableAvailable = computed(() => { const filteredSearchResults = computed(() => { const currentInternal = internalValue.value if (props.multiple && currentInternal !== null && Array.isArray(currentInternal)) { - return searchResults.value.filter((item: any) => !currentInternal.some(e => e === item)) + return searchResultsRef.value.filter((item: any) => !currentInternal.some(e => e === item)) } - return searchResults.value + return searchResultsRef.value }) const hasMultiple = computed(() => { @@ -392,8 +392,8 @@ function create() { } function createOrSelectOnEnter() { - if (!creatableAvailable.value && searchResults.value.length === 1) { - select(searchResults.value[0]) + if (!creatableAvailable.value && searchResultsRef.value.length === 1) { + select(searchResultsRef.value[0]) return } diff --git a/src/components/misc/flatpickr/Flatpickr.vue b/src/components/misc/flatpickr/Flatpickr.vue index 78f171d91..f8a296962 100644 --- a/src/components/misc/flatpickr/Flatpickr.vue +++ b/src/components/misc/flatpickr/Flatpickr.vue @@ -93,7 +93,7 @@ const emit = defineEmits([ ...allEvents.map(camelToKebab), ]) -const {modelValue, config, disabled} = toRefs(props) +const {modelValue: modelValueRef, config: configRef, disabled: disabledRef} = toRefs(props) // bind listener like onBlur const attrs = useAttrs() @@ -159,7 +159,7 @@ onMounted(() => { }) onBeforeUnmount(() => fp.value?.destroy()) -watch(config, () => { +watch(configRef, () => { if (!fp.value) return // Workaround: Don't pass hooks to configs again otherwise // previously registered hooks will stop working @@ -201,7 +201,7 @@ onBeforeUnmount(() => fpInput.value?.removeEventListener('blur', onBlur)) * Watch for the disabled property and sets the value to the real input. */ watchEffect(() => { - if (disabled.value) { + if (disabledRef.value) { fpInput.value?.setAttribute('disabled', '') } else { fpInput.value?.removeAttribute('disabled') @@ -212,7 +212,7 @@ watchEffect(() => { * Watch for changes from parent component and update DOM */ watch( - modelValue, + modelValueRef, newValue => { // Prevent updates if v-model value is same as input's current value if (!root.value || newValue === nullify(root.value.value)) return diff --git a/src/components/project/partials/filters.vue b/src/components/project/partials/filters.vue index 873aa511e..49d7a1123 100644 --- a/src/components/project/partials/filters.vue +++ b/src/components/project/partials/filters.vue @@ -255,7 +255,7 @@ const props = defineProps({ const emit = defineEmits(['update:modelValue']) -const {modelValue} = toRefs(props) +const {modelValue: modelValueRef} = toRefs(props) const labelStore = useLabelStore() @@ -289,7 +289,7 @@ onMounted(() => { }) watch( - modelValue, + modelValueRef, (value) => { // FIXME: filters should only be converted to snake case in // the last moment diff --git a/src/components/tasks/GanttChart.vue b/src/components/tasks/GanttChart.vue index 154f89385..ec0c04461 100644 --- a/src/components/tasks/GanttChart.vue +++ b/src/components/tasks/GanttChart.vue @@ -78,7 +78,7 @@ const emit = defineEmits<{ (e: 'update:task', task: ITaskPartialWithId): void }>() -const {tasks, filters} = toRefs(props) +const {tasks: tasksRef, filters: filtersRef} = toRefs(props) // setup dayjs for vue-ganttastic const dayjsLanguageLoading = ref(false) @@ -87,8 +87,8 @@ extendDayjs() const router = useRouter() -const dateFromDate = computed(() => new Date(new Date(filters.value.dateFrom).setHours(0,0,0,0))) -const dateToDate = computed(() => new Date(new Date(filters.value.dateTo).setHours(23,59,0,0))) +const dateFromDate = computed(() => new Date(new Date(filtersRef.value.dateFrom).setHours(0,0,0,0))) +const dateToDate = computed(() => new Date(new Date(filtersRef.value.dateTo).setHours(23,59,0,0))) const DAY_WIDTH_PIXELS = 30 const ganttChartWidth = computed(() => { @@ -103,10 +103,10 @@ const ganttBars = ref([]) * Update ganttBars when tasks change */ watch( - tasks, + tasksRef, () => { ganttBars.value = [] - tasks.value.forEach(t => ganttBars.value.push(transformTaskToGanttBar(t))) + tasksRef.value.forEach(t => ganttBars.value.push(transformTaskToGanttBar(t))) }, {deep: true, immediate: true}, ) diff --git a/src/components/tasks/partials/createdUpdated.vue b/src/components/tasks/partials/createdUpdated.vue index 26aa5e106..306f39820 100644 --- a/src/components/tasks/partials/createdUpdated.vue +++ b/src/components/tasks/partials/createdUpdated.vue @@ -39,12 +39,12 @@ const props = defineProps({ }, }) -const {task} = toRefs(props) +const {task: taskRef} = toRefs(props) -const updatedSince = computed(() => formatDateSince(task.value.updated)) -const updatedFormatted = computed(() => formatDateLong(task.value.updated)) -const doneSince = computed(() => formatDateSince(task.value.doneAt)) -const doneFormatted = computed(() => formatDateLong(task.value.doneAt)) +const updatedSince = computed(() => formatDateSince(taskRef.value.updated)) +const updatedFormatted = computed(() => formatDateLong(taskRef.value.updated)) +const doneSince = computed(() => formatDateSince(taskRef.value.doneAt)) +const doneFormatted = computed(() => formatDateLong(taskRef.value.doneAt))