staffa 0.20.0 → 0.22.1

package/src/components/textline.ts

@@ -1,6 +1,6 @@
 import A from "aberdeen";
 import type { Bindable } from "../core.js";
-import { type FieldOptions, applyControlAttrs, drawField } from "./field.js";
+import { type FieldOptions, type InsetOptions, applyControlAttrs, drawField, drawInsets } from "./field.js";
 
 /**
  * The `<input>` types {@link textline} supports. Deliberately excludes types
@@ -22,7 +22,7 @@ export type TextlineType =
 	| "week";
 
 /** Options for {@link textline}. */
-export interface TextlineOptions extends FieldOptions {
+export interface TextlineOptions extends FieldOptions, InsetOptions {
 	/** Input type. Defaults to `"text"`. */
 	type?: TextlineType;
 	/** Placeholder text. */
@@ -48,18 +48,23 @@ export interface TextlineOptions extends FieldOptions {
  * ```ts
  * const $user = A.proxy({email: "test@example.com"});
  * S.textline({ label: "Email", type: "email", required: true, bind: A.ref($user, "email") });
+ *
+ * // Content inside the field: a glyph against its left edge, a button against its right.
+ * S.textline({ placeholder: "Search…", prefix: search, suffix: () => S.iconButton({ icon: x, tooltip: "Clear" }) });
  * ```
  */
 export function textline(opts: TextlineOptions = {}): void {
 	drawField(opts, (id, isInvalid) => {
-		A("input.s-input", opts.inputAttrs, () => {
-			A("type=", opts.type ?? "text");
-			if (opts.placeholder != null) A("placeholder=", opts.placeholder);
-			if (opts.autocomplete != null) A("autocomplete=", opts.autocomplete);
-			if (opts.value != null && !opts.bind) A("value=", opts.value);
-			if (opts.input) A("input=", opts.input);
-			if (opts.change) A("change=", opts.change);
-			applyControlAttrs(opts, id, isInvalid, opts.bind);
+		drawInsets(opts, false, () => {
+			A("input.s-input", opts.inputAttrs, () => {
+				A("type=", opts.type ?? "text");
+				if (opts.placeholder != null) A("placeholder=", opts.placeholder);
+				if (opts.autocomplete != null) A("autocomplete=", opts.autocomplete);
+				if (opts.value != null && !opts.bind) A("value=", opts.value);
+				if (opts.input) A("input=", opts.input);
+				if (opts.change) A("change=", opts.change);
+				applyControlAttrs(opts, id, isInvalid, opts.bind);
+			});
 		});
 	});
 }

package/src/index.ts

@@ -34,7 +34,7 @@
 export { setDarkMode, getDarkMode } from "./theme.js";
 export { formatKey, bindKey } from "./keys.js";
 export { showKeyHelp, setKeyHelp } from "./components/keyhelp.js";
-export { autocomplete, type AutocompleteOptions, type AutocompleteOptionInput } from "./components/autocomplete.js";
+export { autocomplete, matchWords, type AutocompleteOptions, type AutocompleteOptionInput } from "./components/autocomplete.js";
 export { box, type BoxOptions } from "./components/box.js";
 export { button, iconButton, type ButtonOptions, type IconButtonOptions } from "./components/button.js";
 export { buttonChooser, type ButtonChooserOptions } from "./components/buttonChooser.js";
@@ -51,7 +51,7 @@ export { textarea, type TextareaOptions } from "./components/textarea.js";
 export { textline, type TextlineOptions, type TextlineType } from "./components/textline.js";
 export { toast, type ToastOptions } from "./components/toast.js";
 export { addTooltip, type TooltipOptions } from "./components/tooltip.js";
-export type { FieldOptions } from "./components/field.js";
+export type { FieldOptions, InsetOptions } from "./components/field.js";
 
 // Re-export theming and shared types for advanced use.
 export type {ContentOptions, Bindable, Slot, Attributes} from "./core.js";