Danny Morabito
dc9abee715
✨ Features added: - 🔍 Implement functional search in header navigation - ⚙️ Add basic user settings page - 📱 Make dashboard fully responsive 🔧 Enhancements: - 🎭 Standardize CSS with consistent theming across components - 🧹 Remove unused CSS for better performance - 📊 Improve dashboard layout and visual hierarchy - 📦 Redesign last block widget for better usability 💅 This commit introduces a cohesive design system with functional design-token components for a more ✨ polished user experience.
165 lines
4.6 KiB
TypeScript
165 lines
4.6 KiB
TypeScript
import { LitElement, css, html } from 'lit';
|
|
import { customElement, property } from 'lit/decorators.js';
|
|
import { when } from 'lit/directives/when.js';
|
|
|
|
@customElement('arx-input')
|
|
export class StyledInput extends LitElement {
|
|
@property() placeholder = '';
|
|
@property() value = '';
|
|
@property({ type: Boolean }) disabled = false;
|
|
@property() type = 'text';
|
|
@property() name = '';
|
|
@property({ type: Boolean }) required = false;
|
|
@property() label = '';
|
|
|
|
static override styles = css`
|
|
:host {
|
|
display: inline-block;
|
|
width: 100%;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 14px;
|
|
color: var(--color-base-content);
|
|
font-weight: 500;
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
padding: 14px 16px;
|
|
font-size: 16px;
|
|
color: var(--color-base-content);
|
|
background: var(--color-base-100);
|
|
border: var(--border) solid var(--color-base-300);
|
|
border-radius: var(--radius-field);
|
|
box-shadow: inset calc(var(--depth) * 2px) calc(var(--depth) * 2px)
|
|
calc(var(--depth) * 4px)
|
|
oklch(from var(--color-base-content) l c h / 0.15),
|
|
inset calc(var(--depth) * -2px) calc(var(--depth) * -2px)
|
|
calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.7),
|
|
0 0 0 transparent;
|
|
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
input::placeholder {
|
|
color: var(--color-secondary);
|
|
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.1);
|
|
}
|
|
|
|
input:hover {
|
|
transform: translateY(-1px);
|
|
background: oklch(from var(--color-base-100) calc(l + 0.02) c h);
|
|
}
|
|
|
|
input:hover::placeholder {
|
|
transform: translateX(3px);
|
|
}
|
|
|
|
input:focus {
|
|
outline: none;
|
|
transform: translateY(1px);
|
|
border-top: var(--border) solid
|
|
oklch(from var(--color-base-300) l c h / 0.8);
|
|
border-left: var(--border) solid
|
|
oklch(from var(--color-base-300) l c h / 0.8);
|
|
border-bottom: var(--border) solid
|
|
oklch(from var(--color-base-200) l c h / 0.8);
|
|
border-right: var(--border) solid
|
|
oklch(from var(--color-base-200) l c h / 0.8);
|
|
box-shadow: inset calc(var(--depth) * 3px) calc(var(--depth) * 3px)
|
|
calc(var(--depth) * 5px)
|
|
oklch(from var(--color-base-content) l c h / 0.2),
|
|
inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
|
|
calc(var(--depth) * 3px) oklch(from var(--color-base-100) l c h / 0.5),
|
|
0 0 0 transparent;
|
|
background: linear-gradient(
|
|
145deg,
|
|
oklch(from var(--color-base-100) calc(l - 0.03) c h),
|
|
oklch(from var(--color-base-100) l c h)
|
|
);
|
|
}
|
|
|
|
input:disabled {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
box-shadow: inset calc(var(--depth) * 1px) calc(var(--depth) * 1px)
|
|
calc(var(--depth) * 2px)
|
|
oklch(from var(--color-base-content) l c h / 0.05),
|
|
inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
|
|
calc(var(--depth) * 2px) oklch(from var(--color-base-100) l c h / 0.4);
|
|
transform: none;
|
|
}
|
|
`;
|
|
|
|
override render() {
|
|
return html`
|
|
${when(this.label, () => html`<label for="input-${this.name}">${this.label}</label>`)}
|
|
<input
|
|
.value=${this.value}
|
|
?disabled=${this.disabled}
|
|
?required=${this.required}
|
|
placeholder=${this.placeholder}
|
|
type=${this.type}
|
|
name=${this.name}
|
|
@input=${this._handleInput}
|
|
@focus=${this._handleFocus}
|
|
@blur=${this._handleBlur}
|
|
@keydown=${this._handleKeyDown}
|
|
@keyup=${this._handleKeyUp}
|
|
/>
|
|
`;
|
|
}
|
|
|
|
private _handleKeyDown(e: KeyboardEvent) {
|
|
this.dispatchEvent(
|
|
new CustomEvent('keydown', {
|
|
detail: { key: e.key },
|
|
bubbles: true,
|
|
composed: true,
|
|
}),
|
|
);
|
|
}
|
|
|
|
private _handleKeyUp(e: KeyboardEvent) {
|
|
this.dispatchEvent(
|
|
new CustomEvent('keyup', {
|
|
detail: { key: e.key },
|
|
bubbles: true,
|
|
composed: true,
|
|
}),
|
|
);
|
|
}
|
|
|
|
private _handleFocus() {
|
|
this.dispatchEvent(
|
|
new CustomEvent('focus', {
|
|
bubbles: true,
|
|
composed: true,
|
|
}),
|
|
);
|
|
}
|
|
|
|
private _handleBlur() {
|
|
this.dispatchEvent(
|
|
new CustomEvent('blur', {
|
|
bubbles: true,
|
|
composed: 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,
|
|
}),
|
|
);
|
|
}
|
|
}
|