Arx/Eve
2
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

fix repeat events bug with input and textarea

Browse source
This commit is contained in:
Danny Morabito 2025-03-25 19:00:41 +01:00
parent 269dcde557
commit 9a125e3111
Signed by: dannym
GPG key ID: 7CC8056A5A04557E
9 changed files with 109 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/DateTimeSettings.ts
View file

@ -1,9 +1,10 @@
import { StyledToggle } from '@/components/General/Toggle';
import { ArxInputChangeEvent, type StyledInput } from '@components/General/Input';
import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@components/General/Input';
import '@components/General/Fieldset';
import '@components/General/Input';
import '@components/General/Select';
interface DateTimeFormatOptions {
@ -71,10 +72,10 @@ export class DateTimeSettings extends LitElement {
}
private handleChange(key: keyof DateTimeFormatOptions, e: Event) {
const target = e.target as HTMLSelectElement | HTMLInputElement | StyledToggle;
let value: string | boolean | undefined = target.value;
let value = e instanceof ArxInputChangeEvent ? e.detail.value : (e.target as HTMLSelectElement).value;
const target = e.target as StyledInput | HTMLSelectElement | HTMLInputElement | StyledToggle;
if (key === 'hour12' && target instanceof StyledToggle) value = target.checked;
if (key === 'hour12' && target instanceof StyledToggle) value = target.checked.toString();
this.options = {
...this.options,
@ -126,7 +127,7 @@ export class DateTimeSettings extends LitElement {
label="Locale"
type="text"
.value=${this.options.locale}
@input=${(e: Event) => this.handleChange('locale', e)}
@change=${(e: Event) => this.handleChange('locale', e)}
>
</arx-input>

68
src/components/General/Input.ts
View file

@ -1,17 +1,35 @@
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { LitElement, type PropertyValues, css, html } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { when } from 'lit/directives/when.js';
export class ArxInputChangeEvent extends CustomEvent<{ value: string }> {
constructor(value: string) {
super('change', { detail: { value } });
}
}
@customElement('arx-input')
export class StyledInput extends LitElement {
@property() placeholder = '';
@property() value = '';
@property({ type: Boolean }) disabled = false;
@property() type = 'text';
@property() type: 'text' | 'number' | 'password' = 'text';
@property() name = '';
@property({ type: Boolean }) required = false;
@property() label = '';
@query('input') private _input!: HTMLInputElement;
@state() private _value = '';
protected override firstUpdated(_changedProperties: PropertyValues): void {
this._value = this.value;
}
protected override updated(changedProperties: PropertyValues): void {
if (changedProperties.has('value')) this._value = this.value;
}
static override styles = css`
:host {
display: inline-block;
@ -98,7 +116,7 @@ export class StyledInput extends LitElement {
return html`
${when(this.label, () => html`<label for="input-${this.name}">${this.label}</label>`)}
<input
.value=${this.value}
.value=${this._value}
?disabled=${this.disabled}
?required=${this.required}
placeholder=${this.placeholder}
@ -114,52 +132,24 @@ export class StyledInput extends LitElement {
}
private _handleKeyDown(e: KeyboardEvent) {
this.dispatchEvent(
new CustomEvent('keydown', {
detail: { key: e.key },
bubbles: true,
composed: true,
}),
);
this.dispatchEvent(new CustomEvent('keydown', { detail: { key: e.key }, composed: true, bubbles: true }));
}
private _handleKeyUp(e: KeyboardEvent) {
this.dispatchEvent(
new CustomEvent('keyup', {
detail: { key: e.key },
bubbles: true,
composed: true,
}),
);
this.dispatchEvent(new CustomEvent('keyup', { detail: { key: e.key }, composed: true, bubbles: true }));
}
private _handleFocus() {
this.dispatchEvent(
new CustomEvent('focus', {
bubbles: true,
composed: true,
}),
);
this.dispatchEvent(new CustomEvent('focus', { composed: true, bubbles: true }));
}
private _handleBlur() {
this.dispatchEvent(
new CustomEvent('blur', {
bubbles: true,
composed: true,
}),
);
this.dispatchEvent(new CustomEvent('blur', { composed: true, bubbles: true }));
}
private _handleInput(e: InputEvent) {
const input = e.target as HTMLInputElement;
this.value = input.value;
this.dispatchEvent(
new CustomEvent('input', {
detail: { value: this.value },
bubbles: true,
composed: true,
}),
);
this._value = this._input.value;
this.dispatchEvent(new ArxInputChangeEvent(this._value));
e.preventDefault();
}
}

8
src/components/General/Prompt.ts
View file

@ -1,3 +1,4 @@
import type { ArxInputChangeEvent } from '@components/General/Input';
import { LitElement, css, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
@ -131,9 +132,8 @@ export class EvePrompt extends LitElement {
if (e.key === 'Enter' && !e.shiftKey) this._handleSave();
}
private _handleInputChange(e: Event) {
const target = e.target as HTMLInputElement;
this._inputValue = target.value;
private _handleInputChange(e: ArxInputChangeEvent) {
this._inputValue = e.detail.value;
}
private _handleCancel() {
@ -166,7 +166,7 @@ export class EvePrompt extends LitElement {
type="text"
class="input-field"
.value=${this._inputValue}
@input=${this._handleInputChange}
@change=${this._handleInputChange}
placeholder=${this.placeholder}
></arx-input>
`

9
src/components/General/Textarea.ts
View file

@ -1,6 +1,7 @@
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { when } from 'lit/directives/when.js';
import { ArxInputChangeEvent } from './Input';
@customElement('arx-textarea')
export class StyledTextarea extends LitElement {
@ -201,12 +202,6 @@ export class StyledTextarea extends LitElement {
private _handleInput(e: InputEvent) {
const textarea = e.target as HTMLTextAreaElement;
this.value = textarea.value;
this.dispatchEvent(
new CustomEvent('input', {
detail: { value: this.value },
bubbles: true,
composed: true,
}),
);
this.dispatchEvent(new ArxInputChangeEvent(this.value));
}
}

54
src/components/Header.ts
View file

@ -1,4 +1,5 @@
import { ndk } from '@/ndk';
import type { ArxInputChangeEvent } from '@components/General/Input';
import type { NDKEvent } from '@nostr-dev-kit/ndk';
import * as nip19 from '@nostr/tools/nip19';
import { LitElement, css, html } from 'lit';
@ -8,8 +9,8 @@ import { keyed } from 'lit/directives/keyed.js';
import { map } from 'lit/directives/map.js';
import { when } from 'lit/directives/when.js';
import '@components/HeaderSugestion';
import '@components/General/Input';
import '@components/HeaderSugestion';
@customElement('arx-header')
export class Header extends LitElement {
@ -49,10 +50,10 @@ export class Header extends LitElement {
.nav-buttons {
display: flex;
gap: var(--space-xs, 0.5rem);
padding-right: var(--space-xs, 0.5rem);
padding: 0 var(--space-xs, 0.5rem);
}
.nav-buttons button {
button {
text-decoration: none;
color: var(--color-primary-content);
background: oklch(from var(--color-primary-content) l c h / 0.1);
@ -66,23 +67,21 @@ export class Header extends LitElement {
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
&:hover {
background: oklch(from var(--color-primary-content) l c h / 0.2);
transform: translateY(-2px);
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
calc(var(--depth) * 4px)
oklch(from var(--color-base-content) l c h / 0.15);
}
&:active {
transform: translateY(1px);
}
.nav-buttons button:hover {
background: oklch(from var(--color-primary-content) l c h / 0.2);
transform: translateY(-2px);
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
calc(var(--depth) * 4px)
oklch(from var(--color-base-content) l c h / 0.15);
}
.nav-buttons button:active {
transform: translateY(1px);
}
.nav-buttons button.disabled {
opacity: 0.5;
pointer-events: none;
&.disabled {
opacity: 0.5;
pointer-events: none;
}
}
.search-container {
@ -153,7 +152,7 @@ export class Header extends LitElement {
placeholder=${this.url}
@keyup=${this._handleSearch}
@focus=${this._handleFocus}
@input=${this._handleInput}
@change=${this._handleInput}
></arx-input>
${when(
this.showSuggestions,
@ -175,16 +174,25 @@ export class Header extends LitElement {
`,
)}
</div>
<div class="nav-buttons">
<button @click=${this._goToWallet}>
<iconify-icon icon="material-symbols:wallet"></iconify-icon>
</button>
</div>
</header>
`;
}
private _goToWallet() {
window.location.hash = 'wallet';
}
private _handleFocus() {
this.showSuggestions = true;
}
private _handleInput(e: InputEvent) {
this.searchQuery = (e.target as HTMLInputElement).value;
private _handleInput(e: ArxInputChangeEvent) {
this.searchQuery = e.detail.value;
if (this._debounceTimeout) {
clearTimeout(this._debounceTimeout);
}
@ -245,8 +253,6 @@ export class Header extends LitElement {
private _handleSearch(e: KeyboardEvent) {
if (e.key !== 'Enter') return;
const target = e.target as HTMLInputElement;
this.searchQuery = target.value;
this.showSuggestions = false;
if (this.searchQuery.startsWith('npub1')) {

29
src/components/InitialSetup.ts
View file

@ -1,4 +1,5 @@
import { ndk, setSigner } from '@/ndk';
import type { ArxInputChangeEvent } from '@components/General/Input';
import { animate } from '@lit-labs/motion';
import { randomBytes } from '@noble/ciphers/webcrypto';
import { NDKEvent, NDKKind, NDKPrivateKeySigner } from '@nostr-dev-kit/ndk';
@ -10,10 +11,10 @@ import { encodeBase64 } from '@std/encoding/base64';
import { LitElement, css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@components/LoadingView';
import '@components/General/Button';
import '@components/General/Input';
import '@components/General/Fieldset';
import '@components/General/Input';
import '@components/LoadingView';
@customElement('arx-initial-setup')
export class InitialSetup extends LitElement {
@ -201,8 +202,8 @@ export class InitialSetup extends LitElement {
}, 300);
}
private onSeedPhraseInput(event: Event) {
this.seedPhrase = (event.target as HTMLInputElement).value;
private onSeedPhraseInput(event: ArxInputChangeEvent) {
this.seedPhrase = event.detail.value;
}
private generateSeedPhrase() {
@ -300,7 +301,7 @@ export class InitialSetup extends LitElement {
</p>
<div class="input-group">
<arx-input
@input=${this.onSeedPhraseInput}
@change=${this.onSeedPhraseInput}
.value=${this.seedPhrase}
id="seed-input"
type="text"
@ -381,16 +382,16 @@ export class InitialSetup extends LitElement {
`;
}
private onUserNameInput(e: Event) {
this.userName = (e.target as HTMLInputElement).value;
private onUserNameInput(e: CustomEvent<{ value: string }>) {
this.userName = e.detail.value;
}
private onProfileImageInput(e: Event) {
this.profileImage = (e.target as HTMLInputElement).value;
private onProfileImageInput(e: CustomEvent<{ value: string }>) {
this.profileImage = e.detail.value;
}
private onLightningAddressInput(e: Event) {
this.lightningAddress = (e.target as HTMLInputElement).value;
private onLightningAddressInput(e: CustomEvent<{ value: string }>) {
this.lightningAddress = e.detail.value;
}
private renderPageFour() {
@ -409,7 +410,7 @@ export class InitialSetup extends LitElement {
id="username"
type="text"
.value=${this.userName}
@input=${this.onUserNameInput}
@change=${this.onUserNameInput}
placeholder="Enter your name"
></arx-input>
</arx-fieldset>
@ -418,7 +419,7 @@ export class InitialSetup extends LitElement {
id="profile-image"
type="text"
.value=${this.profileImage}
@input=${this.onProfileImageInput}
@change=${this.onProfileImageInput}
placeholder="Enter image URL"
></arx-input>
<small class="note">
@ -464,7 +465,7 @@ export class InitialSetup extends LitElement {
id="lightning-address"
type="text"
.value=${this.lightningAddress}
@input=${this.onLightningAddressInput}
@change=${this.onLightningAddressInput}
placeholder="your@lightning.address"
/></arx-input>
<small class="note">

7
src/routes/Arbor/NewPost.ts
View file

@ -1,3 +1,4 @@
import type { ArxInputChangeEvent } from '@/components/General/Input';
import { getSigner, ndk } from '@/ndk';
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { LitElement, css, html } from 'lit';
@ -106,8 +107,8 @@ export class ArborPostCreator extends LitElement {
}
}
private handleContentInput(e: InputEvent) {
this.postContent = (e.target as HTMLTextAreaElement).value;
private handleContentInput(e: ArxInputChangeEvent) {
this.postContent = e.detail.value;
if (this.error && this.postContent.length >= 10) {
this.error = null;
}
@ -121,7 +122,7 @@ export class ArborPostCreator extends LitElement {
<arx-textarea
placeholder="Post. You can use Markdown here."
.value=${this.postContent}
@input=${this.handleContentInput}
@change=${this.handleContentInput}
?disabled=${this.isCreating}
></arx-textarea>

15
src/routes/Arbor/NewTopic.ts
View file

@ -1,11 +1,12 @@
import { getSigner, ndk } from '@/ndk';
import type { ArxInputChangeEvent } from '@components/General/Input';
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { LitElement, css, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import '@components/General/Button';
import '@components/General/Input';
import '@components/General/Textarea';
import '@components/General/Button';
@customElement('arx-arbor-topic-creator')
export class ArborTopicCreator extends LitElement {
@ -86,12 +87,12 @@ export class ArborTopicCreator extends LitElement {
}
}
private handleTopicInput(e: InputEvent) {
this.newTopic = (e.target as HTMLInputElement).value;
private handleTopicInput(e: ArxInputChangeEvent) {
this.newTopic = e.detail.value;
}
private handleContentInput(e: InputEvent) {
this.topicContent = (e.target as HTMLTextAreaElement).value;
private handleContentInput(e: ArxInputChangeEvent) {
this.topicContent = e.detail.value;
}
override render() {
@ -102,14 +103,14 @@ export class ArborTopicCreator extends LitElement {
type="text"
placeholder="New Topic"
.value=${this.newTopic}
@input=${this.handleTopicInput}
@change=${this.handleTopicInput}
?disabled=${this.isCreating}
></arx-input>
<arx-textarea
placeholder="Topic. You can use Markdown here."
.value=${this.topicContent}
@input=${this.handleContentInput}
@change=${this.handleContentInput}
?disabled=${this.isCreating}
></arx-textarea>

22
src/routes/Settings.ts
View file

@ -1,16 +1,17 @@
import defaultAvatar from '@/default-avatar.png';
import { getSigner, getUserProfile, ndk } from '@/ndk';
import type { ArxInputChangeEvent } from '@components/General/Input';
import { NDKEvent, type NDKUserProfile } from '@nostr-dev-kit/ndk';
import { LitElement, css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { when } from 'lit/directives/when.js';
import '@components/DateTimeSettings';
import '@components/General/Input';
import '@components/General/Button';
import '@components/General/Fieldset';
import '@components/General/Card';
import '@components/Breadcrumbs';
import '@components/DateTimeSettings';
import '@components/General/Button';
import '@components/General/Card';
import '@components/General/Fieldset';
import '@components/General/Input';
@customElement('arx-settings')
export class EveSettings extends LitElement {
@ -73,11 +74,10 @@ export class EveSettings extends LitElement {
}
}
private handleInputChange(e: Event) {
const target = e.target as HTMLInputElement;
private handleInputChange(field: string, e: ArxInputChangeEvent) {
this.profile = {
...this.profile,
[target.name]: target.value,
[field]: e.detail.value,
};
}
@ -144,7 +144,7 @@ export class EveSettings extends LitElement {
type="text"
name="name"
.value=${this.profile.name}
@input=${this.handleInputChange}
@change=${(e: ArxInputChangeEvent) => this.handleInputChange('name', e)}
placeholder="Your display name"
></arx-input>
@ -153,7 +153,7 @@ export class EveSettings extends LitElement {
type="text"
name="image"
.value=${this.profile.picture}
@input=${this.handleInputChange}
@change=${(e: ArxInputChangeEvent) => this.handleInputChange('picture', e)}
placeholder="https://example.com/your-image.jpg"
></arx-input>
@ -162,7 +162,7 @@ export class EveSettings extends LitElement {
type="text"
name="banner"
.value=${this.profile.banner}
@input=${this.handleInputChange}
@change=${(e: ArxInputChangeEvent) => this.handleInputChange('banner', e)}
placeholder="https://example.com/your-image.jpg"
></arx-input>
</arx-fieldset>