Skip to content

Commit

Permalink
chore: simplify form-field
Browse files Browse the repository at this point in the history
  • Loading branch information
@valeriansaliou
valeriansaliou committed Nov 10, 2024
1 parent 14e1d83 commit cafc5d4
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 261 deletions.
26 changes: 9 additions & 17 deletions src/assemblies/start/StartLoginForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,6 @@

.a-start-login-form__options
.a-start-login-form__options-left
form-checkbox(
v-model="form.remember"
:loading="loading"
name="remember"
)
| Remember me

.a-start-login-form__options-right
a.a-start-login-form__options-recover
Expand All @@ -72,11 +66,11 @@

<script lang="ts">
// PROJECT: COMPONENTS
import BaseAlert from '@/components/base/BaseAlert.vue';
import BaseButton from '@/components/base/BaseButton.vue';
import BaseProseLogo from '@/components/base/BaseProseLogo.vue';
import FormCheckbox from '@/components/form/FormCheckbox.vue';
import FormField from '@/components/form/FormField.vue';
import BaseAlert from "@/components/base/BaseAlert.vue";
import BaseButton from "@/components/base/BaseButton.vue";
import BaseProseLogo from "@/components/base/BaseProseLogo.vue";
import FormCheckbox from "@/components/form/FormCheckbox.vue";
import FormField from "@/components/form/FormField.vue";
// PROJECT: STORES
// import Store from "@/store";
Expand All @@ -85,7 +79,6 @@ import FormField from '@/components/form/FormField.vue';
export interface StateForm {
jid: string;
password: string;
remember: true;
}
export default {
Expand Down Expand Up @@ -113,8 +106,7 @@ export default {
form: {
jid: "",
password: "",
remember: true
password: ""
} as StateForm
};
},
Expand All @@ -132,9 +124,9 @@ export default {
"Account credentials are invalid",
"Please check your password and try again"
);
// this.$emit("submit", {
// ...this.form
// });
// this.$emit("submit", {
// ...this.form
// });
}
}
};
Expand Down
213 changes: 6 additions & 207 deletions src/components/form/FormField.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@
TEMPLATE
********************************************************************** -->

<!-- v-click-away="onClickAway" -->

<template lang="pug">
div(
:class=`[
Expand Down Expand Up @@ -84,25 +82,7 @@ div(

<script lang="ts">
// NPM
import { keycode as keyCodes } from "keycode";
// PROJECT: COMPONENTS
// import {
// default as FormFieldSuggest,
// Suggestion as FormFieldSuggestSuggestion
// } from "@/components/form/FormFieldSuggest.vue";
// INTERFACES
interface Selection {
value: string;
cursor?: SelectionCursor;
}
export interface SelectionCursor {
text: string;
start: number;
end: number;
}
import { codes as keyCodes } from "keycode";
export default {
name: "FormField",
Expand Down Expand Up @@ -183,11 +163,6 @@ export default {
default: null
},
autogrow: {
type: Boolean,
default: false
},
submittable: {
type: Boolean,
default: false
Expand Down Expand Up @@ -220,27 +195,19 @@ export default {
"keystroke",
"focus",
"change",
"submit",
"refresh"
"submit"
],
data() {
return {
// --> STATE <--
isFocused: false,
areSuggestionsHidden: false,
value: ""
};
},
computed: {
hasSuggestions(): boolean {
return this.suggestions.length > 0 && this.areSuggestionsHidden !== true;
}
},
watch: {
modelValue: {
immediate: true,
Expand All @@ -249,18 +216,10 @@ export default {
// Update value in the state
this.updateStateValue(value);
}
},
suggestions() {
// Ensure suggestions are not hidden (when they change)
this.areSuggestionsHidden = false;
}
},
mounted() {
// Refresh auto-grow (if enabled)
this.refreshAutogrow();
// Apply auto-focus?
// Notice: delay focus, otherwise the focus might not work in certain \
// circumstances.
Expand All @@ -279,16 +238,6 @@ export default {
this.focusField();
},
acquireFieldSelectionFromParent(): Selection | void {
// Alias field selection method
return this.acquireFieldSelection();
},
selectFieldRangeFromParent(start: number, end: number): void {
// Alias field range method
return this.selectFieldRange(start, end);
},
// --> HELPERS <--
focusField(): void {
Expand All @@ -302,169 +251,29 @@ export default {
}
},
acquireFieldSelection(): Selection | void {
const fieldElement = (this.$refs.field as HTMLInputElement) || null;
if (fieldElement !== null) {
// Acquire value from field
const fieldValue = fieldElement.value;
// Populate selection object
const selection: Selection = {
value: fieldValue
};
// Obtain the indexes of the selected characters (start and end)
const cursorStart = fieldElement.selectionStart,
cursorEnd = fieldElement.selectionEnd;
if (cursorStart !== null) {
selection.cursor = {
text:
cursorEnd !== null
? fieldElement.value.substring(cursorStart, cursorEnd)
: "",
start: cursorStart,
end: cursorEnd !== null ? cursorEnd : cursorStart
};
}
return selection;
}
return undefined;
},
selectFieldRange(start: number, end: number): void {
const fieldElement = (this.$refs.field as HTMLInputElement) || null;
if (fieldElement !== null) {
fieldElement.setSelectionRange(start, end);
}
},
updateStateValue(value: string): void {
this.value = value;
// Refresh auto-grow (if enabled)
this.$nextTick(this.refreshAutogrow);
},
updateModelValue(value: string | number): void {
this.$emit("update:modelValue", value);
this.$emit("change", value);
},
refreshAutogrow(): void {
if (this.autogrow === true) {
const fieldElement = (this.$refs.field as HTMLElement) || null;
if (fieldElement !== null) {
// Reset height to default (so that later measured scroll height \
// reports its real value)
fieldElement.style.height = "auto";
// Assign new field height
fieldElement.style.height = `${fieldElement.scrollHeight}px`;
// Trigger resize event? (height changed)
this.$emit("refresh");
}
}
},
selectActiveSuggestion(): void {
// Select active suggestion
(this.$refs.suggest as typeof FormFieldSuggest)?.selectFromParent();
},
navigateSuggestions(increment: number): void {
// Navigate forwards or backwards in suggestions
(this.$refs.suggest as typeof FormFieldSuggest)?.navigateFromParent(
increment
);
},
clearAllSuggestions(): void {
// Hide suggestions
this.areSuggestionsHidden = true;
},
// generateSuggestionModelValue(
// suggestion: FormFieldSuggestSuggestion
// ): string {
// // Append suggestion value
// const modelValueString = this.modelValue as string,
// modelValueLower = modelValueString.toLowerCase(),
// matchLower = suggestion.action.match.toLowerCase();
// // Acquire intersection size
// const intersectSize =
// modelValueLower.endsWith(matchLower) === true
// ? suggestion.action.match.length
// : 0;
// // Merge suggestion value with existing model value (intersect them)
// return (
// modelValueString.substring(0, modelValueString.length - intersectSize) +
// suggestion.action.replacement
// );
// },
// --> EVENT LISTENERS <--
onClickAway(): void {
// Clear suggestions?
if (this.hasSuggestions === true) {
this.clearAllSuggestions();
}
},
onFieldKeyDown(event: KeyboardEvent): void {
const keyCode = event.keyCode;
switch (keyCode) {
// Enter
case keyCodes.enter: {
if (this.hasSuggestions === true) {
event.preventDefault();
// Select active suggestion
this.selectActiveSuggestion();
} else {
// Handle 'Enter' key press? (if not new line and submittable field)
if (event.shiftKey !== true && this.submittable === true) {
event.preventDefault();
// Trigger field submit event
this.$emit("submit");
}
}
break;
}
// Escape
case keyCodes.esc: {
if (this.hasSuggestions === true) {
event.preventDefault();
// Hide suggestions
this.clearAllSuggestions();
}
break;
}
// Down + Up
case keyCodes.down:
case keyCodes.up: {
if (this.hasSuggestions === true) {
// Handle 'Enter' key press? (if not new line and submittable field)
if (event.shiftKey !== true && this.submittable === true) {
event.preventDefault();
// Navigate in suggestions
this.navigateSuggestions(keyCode === keyCodes.up ? -1 : 1);
// Trigger field submit event
this.$emit("submit");
}
break;
Expand Down Expand Up @@ -519,16 +328,6 @@ export default {
// Propagate focus event
this.$emit("focus", false);
}
// onSuggestSelect(suggestion: FormFieldSuggestSuggestion): void {
// this.clearAllSuggestions();
// // Generate model value for selected suggestion
// let updatedModelValue = this.generateSuggestionModelValue(suggestion);
// // Update model value
// this.updateModelValue(updatedModelValue);
// }
}
};
</script>
Expand Down
Loading

0 comments on commit cafc5d4

Please sign in to comment.