fix: otp auto order

Greasy-Projects · Apr 10, 2024 · 41ffee0 · 41ffee0
1 parent 0536902
commit 41ffee0
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 42 deletions.
diff --git a/components/otp/input.vue b/components/otp/input.vue
@@ -1,14 +1,7 @@
 <script lang="ts">
 import SingleOtpInput from "./single.vue";
 
-// keyCode constants
-const BACKSPACE = 8;
-const LEFT_ARROW = 37;
-const RIGHT_ARROW = 39;
-const DELETE = 46;
-
-export default /* #__PURE__ */ defineComponent({
-	name: "Vue3OtpInput", // vue component name
+export default defineComponent({
 	components: {
 		SingleOtpInput,
 	},
@@ -125,9 +118,7 @@ export default /* #__PURE__ */ defineComponent({
 		const changeCodeAtFocus = (value: number | string) => {
 			oldOtp.value = Object.assign([], otp.value);
 
-			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-			// @ts-ignore
-			otp.value[activeInput.value] = value;
+			otp.value[activeInput.value] = String(value);
 
 			if (oldOtp.value.join("") !== otp.value.join("")) {
 				emit("update:value", otp.value.join(""));
@@ -191,26 +182,29 @@ export default /* #__PURE__ */ defineComponent({
 
 		// Handle cases of backspace, delete, left arrow, right arrow
 		const handleOnKeyDown = (event: KeyboardEvent, index: number) => {
-			switch (event.keyCode) {
-				case BACKSPACE:
+			console.log(event.code);
+			switch (event.code) {
+				case "Backspace":
 					event.preventDefault();
-					changeCodeAtFocus("");
+
 					focusPrevInput();
+					changeCodeAtFocus("");
 					break;
-				case DELETE:
+				case "Delete":
 					event.preventDefault();
 					changeCodeAtFocus("");
 					break;
-				case LEFT_ARROW:
+				case "ArrowLeft":
 					event.preventDefault();
 					focusPrevInput();
 					break;
-				case RIGHT_ARROW:
+				case "ArrowRight":
 					event.preventDefault();
 					focusNextInput();
 					break;
 				default:
 					focusOrder(index);
+					checkFilledAllInputs();
 					break;
 			}
 		};
@@ -226,13 +220,11 @@ export default /* #__PURE__ */ defineComponent({
 		 */
 		const focusOrder = (currentIndex: number) => {
 			if (props.shouldFocusOrder) {
-				setTimeout(() => {
-					const len = otp.value.join("").length;
-					if (currentIndex - len >= 0) {
-						activeInput.value = len;
-						otp.value[currentIndex] = "";
-					}
-				}, 100);
+				const len = otp.value.join("").length;
+				if (currentIndex - len >= 0) {
+					activeInput.value = len;
+					otp.value[currentIndex] = "";
+				}
 			}
 		};
 
@@ -287,5 +279,3 @@ export default /* #__PURE__ */ defineComponent({
 		/>
 	</div>
 </template>
-
-<style scoped></style>
diff --git a/components/otp/single.vue b/components/otp/single.vue
@@ -44,10 +44,6 @@ export default defineComponent({
 				| "numeric"
 				| "decimal"
 				| "search"
-				/**
-				 * Specify that a standard HTML element should behave like a defined custom built-in element
-				 * @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
-				 */
 			>,
 			default: "numeric",
 		},
@@ -86,27 +82,25 @@ export default defineComponent({
 	},
 	emits: ["on-change", "on-keydown", "on-paste", "on-focus", "on-blur"],
 	setup(props, { emit }) {
-		const model = ref(props.value || "");
-		const input = ref<HTMLInputElement | null>(null) as Ref<HTMLInputElement>;
+		const model = ref<string | number>(props.value || "");
+		const input = ref<HTMLInputElement | null>(null);
 
 		const handleOnChange = () => {
 			model.value = model.value.toString();
-			if (model.value.length > 1) {
-				model.value = model.value.slice(0, 1);
+			if (model.value.toString().length > 1) {
+				model.value = model.value.toString().slice(0, 1);
 			}
-			return emit("on-change", model.value);
+			emit("on-change", model.value);
 		};
 
 		const isCodeLetter = (charCode: number) => charCode >= 65 && charCode <= 90;
 		const isCodeNumeric = (charCode: number) =>
 			(charCode >= 48 && charCode <= 57) || (charCode >= 96 && charCode <= 105);
-		// numeric keys and numpad keys
 
 		const handleOnKeyDown = (event: KeyboardEvent) => {
 			if (props.isDisabled) {
 				event.preventDefault();
 			}
-			// Only allow characters 0-9, DEL, Backspace, Enter, Right and Left Arrows, and Pasting
 			const keyEvent = event || window.event;
 			const charCode = keyEvent.which ? keyEvent.which : keyEvent.keyCode;
 			if (
@@ -116,15 +110,17 @@ export default defineComponent({
 			) {
 				emit("on-keydown", event);
 			} else {
-				keyEvent.preventDefault();
+				event.preventDefault();
 			}
 		};
 
 		const handleOnPaste = (event: ClipboardEvent) => emit("on-paste", event);
 
 		const handleOnFocus = () => {
-			input.value.select();
-			return emit("on-focus");
+			if (input.value) {
+				input.value.select();
+			}
+			emit("on-focus");
 		};
 
 		const handleOnBlur = () => emit("on-blur");
@@ -137,11 +133,10 @@ export default defineComponent({
 				}
 			}
 		);
+
 		watch(
 			() => props.focus,
 			(newFocusValue, oldFocusValue) => {
-				// Check if focusedInput changed
-				// Prevent calling function if input already in focus
 				if (oldFocusValue !== newFocusValue && input.value && props.focus) {
 					input.value.focus();
 					input.value.select();

diff --git a/pages/minecraft.vue b/pages/minecraft.vue
@@ -289,6 +289,8 @@ input {
 }
 input:focus-visible {
 	outline: 0;
+	border: 3px solid white;
+	color: #ffffa0;
 }
 
 .otp-input::-webkit-inner-spin-button,