mirror of
https://github.com/getcompanion-ai/co-mono.git
synced 2026-04-15 08:03:39 +00:00
b67c10dfb1
- Create Pi Reader browser extension for Chrome/Firefox - Chrome uses Side Panel API, Firefox uses Sidebar Action API - Supports both browsers with separate manifests and unified codebase - Built with mini-lit components and Tailwind CSS v4 - Features model selection dialog with Ollama support - Hot reload development server watches both browser builds - Add useDefineForClassFields: false to fix LitElement reactivity
112 lines
3.1 KiB
TypeScript
112 lines
3.1 KiB
TypeScript
import { type BaseComponentProps, fc, html } from "@mariozechner/mini-lit";
|
|
import { type Ref, ref } from "lit/directives/ref.js";
|
|
import { i18n } from "./utils/i18n.js";
|
|
|
|
export type InputType = "text" | "email" | "password" | "number" | "url" | "tel" | "search";
|
|
export type InputSize = "sm" | "md" | "lg";
|
|
|
|
export interface InputProps extends BaseComponentProps {
|
|
type?: InputType;
|
|
size?: InputSize;
|
|
value?: string;
|
|
placeholder?: string;
|
|
label?: string;
|
|
error?: string;
|
|
disabled?: boolean;
|
|
required?: boolean;
|
|
name?: string;
|
|
autocomplete?: string;
|
|
min?: number;
|
|
max?: number;
|
|
step?: number;
|
|
inputRef?: Ref<HTMLInputElement>;
|
|
onInput?: (e: Event) => void;
|
|
onChange?: (e: Event) => void;
|
|
onKeyDown?: (e: KeyboardEvent) => void;
|
|
onKeyUp?: (e: KeyboardEvent) => void;
|
|
}
|
|
|
|
export const Input = fc<InputProps>(
|
|
({
|
|
type = "text",
|
|
size = "md",
|
|
value = "",
|
|
placeholder = "",
|
|
label = "",
|
|
error = "",
|
|
disabled = false,
|
|
required = false,
|
|
name = "",
|
|
autocomplete = "",
|
|
min,
|
|
max,
|
|
step,
|
|
inputRef,
|
|
onInput,
|
|
onChange,
|
|
onKeyDown,
|
|
onKeyUp,
|
|
className = "",
|
|
}) => {
|
|
const sizeClasses = {
|
|
sm: "h-8 px-3 py-1 text-sm",
|
|
md: "h-9 px-3 py-1 text-sm md:text-sm",
|
|
lg: "h-10 px-4 py-1 text-base",
|
|
};
|
|
|
|
const baseClasses =
|
|
"flex w-full min-w-0 rounded-md border bg-transparent text-foreground shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium";
|
|
const interactionClasses =
|
|
"placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground";
|
|
const focusClasses = "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]";
|
|
const darkClasses = "dark:bg-input/30";
|
|
const stateClasses = error
|
|
? "border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40"
|
|
: "border-input";
|
|
const disabledClasses = "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50";
|
|
|
|
const handleInput = (e: Event) => {
|
|
onInput?.(e);
|
|
};
|
|
|
|
const handleChange = (e: Event) => {
|
|
onChange?.(e);
|
|
};
|
|
|
|
return html`
|
|
<div class="flex flex-col gap-1.5 ${className}">
|
|
${
|
|
label
|
|
? html`
|
|
<label class="text-sm font-medium text-foreground">
|
|
${label} ${required ? html`<span class="text-destructive">${i18n("*")}</span>` : ""}
|
|
</label>
|
|
`
|
|
: ""
|
|
}
|
|
<input
|
|
type="${type}"
|
|
class="${baseClasses} ${
|
|
sizeClasses[size]
|
|
} ${interactionClasses} ${focusClasses} ${darkClasses} ${stateClasses} ${disabledClasses}"
|
|
.value=${value}
|
|
placeholder="${placeholder}"
|
|
?disabled=${disabled}
|
|
?required=${required}
|
|
?aria-invalid=${!!error}
|
|
name="${name}"
|
|
autocomplete="${autocomplete}"
|
|
min="${min ?? ""}"
|
|
max="${max ?? ""}"
|
|
step="${step ?? ""}"
|
|
@input=${handleInput}
|
|
@change=${handleChange}
|
|
@keydown=${onKeyDown}
|
|
@keyup=${onKeyUp}
|
|
${inputRef ? ref(inputRef) : ""}
|
|
/>
|
|
${error ? html`<span class="text-sm text-destructive">${error}</span>` : ""}
|
|
</div>
|
|
`;
|
|
},
|
|
);
|