Merge pull request #874 from 3YOURMIND/naruto/pre-upgrade/avoid-using…

…-special-characters-in-variables refactor(kotti): Avoid Using Variables With $ or _ in the Template
3YOURMIND · Jan 15, 2024 · 19ec923 · 19ec923
2 parents 290a6ab + 755b591
commit 19ec923
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 32 deletions.
diff --git a/packages/kotti-ui/source/kotti-comment/KtCommentInput.vue b/packages/kotti-ui/source/kotti-comment/KtCommentInput.vue
@@ -2,10 +2,10 @@
 	<div class="kt-comment-input">
 		<KtAvatar size="sm" :src="userAvatar" />
 		<CommentTextArea
-			v-model="_message"
+			v-model="localMessage"
 			v-bind="{ allowInternal, autofocus, isReply, placeholder, tabIndex }"
-			:dataTest="_dataTest"
-			:isInternal="_isInternal"
+			:dataTest="localDataTest"
+			:isInternal="localIsInternal"
 			@cancel="onCancel"
 			@confirm="onConfirm"
 			@toggleInternal="onToggleInternal"
@@ -28,45 +28,45 @@ export default defineComponent({
 	},
 	props: makeProps(KottiCommentInput.propsSchema),
 	setup(props: KottiCommentInput.PropsInternal, { emit }) {
-		const _isInternal = ref<KottiComment.PropsInternal['isInternal']>(
+		const localIsInternal = ref<KottiComment.PropsInternal['isInternal']>(
 			props.isInternal,
 		)
-		const _message = ref<KottiComment.PropsInternal['message']>('')
+		const localMessage = ref<KottiComment.PropsInternal['message']>('')
 
 		watch(
 			() => props.isInternal,
-			(isInternal) => (_isInternal.value = isInternal),
+			(isInternal) => (localIsInternal.value = isInternal),
 			{ flush: 'post' },
 		)
 
 		return {
-			_dataTest: computed(() => {
+			localDataTest: computed(() => {
 				const commentType = `new-${props.isReply ? 'reply' : 'comment'}`
 				return props.dataTest ? `${props.dataTest}.${commentType}` : commentType
 			}),
-			_isInternal,
-			_message,
+			localIsInternal,
+			localMessage,
 			onCancel: () => {
-				_isInternal.value = props.isInternal
-				_message.value = ''
+				localIsInternal.value = props.isInternal
+				localMessage.value = ''
 				emit('cancel')
 			},
 			onConfirm: () => {
-				if (_message.value === '') return
+				if (localMessage.value === '') return
 
 				const payload: KottiComment.Events.Add = {
-					isInternal: _isInternal.value,
-					message: _message.value,
+					isInternal: localIsInternal.value,
+					message: localMessage.value,
 					replyToUserId: props.replyToUserId,
 					parentId: props.parentId,
 				}
 
 				emit('add', payload)
 
-				_isInternal.value = props.isInternal
-				_message.value = ''
+				localIsInternal.value = props.isInternal
+				localMessage.value = ''
 			},
-			onToggleInternal: () => (_isInternal.value = !_isInternal.value),
+			onToggleInternal: () => (localIsInternal.value = !localIsInternal.value),
 		}
 	},
 })

diff --git a/packages/kotti-ui/source/kotti-comment/components/CommentInlineEdit.vue b/packages/kotti-ui/source/kotti-comment/components/CommentInlineEdit.vue
@@ -2,7 +2,7 @@
 	<div class="kt-comment-inline-edit">
 		<CommentTextArea
 			v-if="isEditing"
-			v-model="_message"
+			v-model="localMessage"
 			v-bind="{
 				allowInternal,
 				dataTest,
@@ -42,33 +42,34 @@ export default defineComponent({
 	},
 	props: makeProps(KottiComment.InlineEdit.schema),
 	setup(props: KottiComment.InlineEdit.PropsInternal, { emit }) {
-		const _message = ref<KottiComment.InlineEdit.PropsInternal['message']>('')
+		const localMessage =
+			ref<KottiComment.InlineEdit.PropsInternal['message']>('')
 
 		watch(
 			() => props.isEditing,
 			(isEditing, wasEditing) => {
 				if (isEditing === wasEditing) return
 
-				_message.value = isEditing ? props.message : ''
+				localMessage.value = isEditing ? props.message : ''
 			},
 			{ immediate: true, flush: 'post' },
 		)
 
 		return {
-			_message,
+			localMessage,
 			onCancel: () => {
 				emit('update:isEditing', false)
-				_message.value = ''
+				localMessage.value = ''
 			},
 			onConfirm: () => {
 				emit('update:isEditing', false)
 
-				if (_message.value === '') return
+				if (localMessage.value === '') return
 
 				const payload: KottiComment.Events.Edit = {
 					id: props.id,
 					isInternal: props.isInternal,
-					message: _message.value,
+					message: localMessage.value,
 					parentId: props.parentId,
 				}
 

diff --git a/packages/kotti-ui/source/kotti-field-file-upload/components/DropArea.vue b/packages/kotti-ui/source/kotti-field-file-upload/components/DropArea.vue
@@ -2,7 +2,7 @@
 	<div
 		:class="classes"
 		:data-test="dataTest ? `${dataTest}.dropArea` : undefined"
-		:tabIndex="_tabIndex"
+		:tabIndex="localTabIndex"
 		@click.stop="onTriggerInput"
 		@dragleave.stop.prevent="onDragLeave"
 		@dragover.stop.prevent="onDragOver"
@@ -106,7 +106,6 @@ export default defineComponent({
 		}
 
 		return {
-			_tabIndex: computed(() => (props.isDisabled ? -1 : props.tabIndex ?? 0)),
 			classes: computed(() => ({
 				'kt-field-file-upload-drop-area': true,
 				'kt-field-file-upload-drop-area--is-disabled': props.isDisabled,
@@ -128,6 +127,9 @@ export default defineComponent({
 			})),
 			isError,
 			isHovering,
+			localTabIndex: computed(() =>
+				props.isDisabled ? -1 : props.tabIndex ?? 0,
+			),
 			onDragLeave: () => {
 				isDragging.value = false
 				isError.value = false

diff --git a/packages/kotti-ui/source/kotti-field-file-upload/components/TakePhoto/TakePhoto.vue b/packages/kotti-ui/source/kotti-field-file-upload/components/TakePhoto/TakePhoto.vue
@@ -1,30 +1,30 @@
 <template>
 	<div>
 		<KtButton
-			:data-test="_dataTest"
+			:data-test="localDataTest"
 			:disabled="isDisabled"
 			:label="translations.button.takePhoto"
 			:tabindex="tabIndex"
 			@click.stop="state = State.CAPTURE"
 		/>
 		<CapturePhoto
 			v-if="state === State.CAPTURE"
-			:dataTest="_dataTest"
+			:dataTest="localDataTest"
 			@capture="onCapturePhoto"
 			@close="onClose"
 			@error="onError"
 		/>
 		<ReviewPhoto
 			v-else-if="state === State.REVIEW"
-			:dataTest="_dataTest"
+			:dataTest="localDataTest"
 			:photoUrl="photoUrl"
 			@accept="onAcceptPhoto"
 			@close="onClose"
 			@reject="onRejectPhoto"
 		/>
 		<Error
 			v-else-if="state === State.ERROR"
-			:dataTest="_dataTest"
+			:dataTest="localDataTest"
 			:error="error"
 			@close="onClose"
 			@retry="onErrorRetry"
@@ -73,10 +73,10 @@ export default defineComponent({
 		}
 
 		return {
-			_dataTest: computed(() =>
+			error,
+			localDataTest: computed(() =>
 				props.dataTest ? `${props.dataTest}.takePhoto` : null,
 			),
-			error,
 			onAcceptPhoto: async () => {
 				if (!file.value) return
 				const payload: Shared.Events.AddFiles = [file.value]