staffa 0.19.0 → 0.22.0

package/dist/components/textarea.js

@@ -1,5 +1,5 @@
 import A from "aberdeen";
-import { applyControlAttrs, drawField } from "./field.js";
+import { applyControlAttrs, drawField, drawInsets } from "./field.js";
 A.insertGlobalCss({
     "textarea.s-input": "resize:vertical min-height:3em line-height:1.45",
     "textarea.s-input.s-autoGrow": "resize:none min-height:2.5em overflow-y:hidden",
@@ -12,36 +12,48 @@ A.insertGlobalCss({
  * ```ts
  * const $user = A.proxy({bio: ""});
  * S.textarea({ label: "Bio", bind: A.ref($user, "bio") });
+ *
+ * // A chat box: the send button sits in the bottom-right corner, inside the field.
+ * const $chat = A.proxy({text: ""});
+ * S.textarea({
+ *   placeholder: "Message…",
+ *   bind: A.ref($chat, "text"),
+ *   suffix: () => S.iconButton({ icon: send, tooltip: "Send", click: () => post($chat.text) }),
+ * });
  * ```
  */
 export function textarea(opts = {}) {
     const grow = opts.autoGrow !== false;
     drawField(opts, (id, isInvalid) => {
-        const el = A("textarea.s-input", opts.inputAttrs, () => {
-            if (grow) {
-                A(".s-autoGrow");
-                A("input=", (e) => {
-                    fitToContent(e.currentTarget);
+        // Insets ride the bottom edge here: on a growing box that keeps a send
+        // button beside the caret rather than floating it mid-paragraph.
+        drawInsets(opts, true, () => {
+            const el = A("textarea.s-input", opts.inputAttrs, () => {
+                if (grow) {
+                    A(".s-autoGrow");
+                    A("input=", (e) => {
+                        fitToContent(e.currentTarget);
+                        if (opts.input)
+                            opts.input(e);
+                    });
+                }
+                else {
+                    A("rows=", opts.rows ?? 4);
+                    A("resize:", opts.resize ?? (opts.suffix ? "none" : "vertical"));
                     if (opts.input)
-                        opts.input(e);
-                });
-            }
-            else {
-                A("rows=", opts.rows ?? 4);
-                A("resize:", opts.resize ?? "vertical");
-                if (opts.input)
-                    A("input=", opts.input);
-            }
-            if (opts.placeholder != null)
-                A("placeholder=", opts.placeholder);
-            if (opts.value != null && !opts.bind)
-                A("value=", opts.value);
-            if (opts.change)
-                A("change=", opts.change);
-            applyControlAttrs(opts, id, isInvalid, opts.bind);
+                        A("input=", opts.input);
+                }
+                if (opts.placeholder != null)
+                    A("placeholder=", opts.placeholder);
+                if (opts.value != null && !opts.bind)
+                    A("value=", opts.value);
+                if (opts.change)
+                    A("change=", opts.change);
+                applyControlAttrs(opts, id, isInvalid, opts.bind);
+            });
+            if (grow)
+                requestAnimationFrame(() => fitToContent(el));
         });
-        if (grow)
-            requestAnimationFrame(() => fitToContent(el));
     });
 }
 function fitToContent(el) {

package/dist/components/textline.d.ts

@@ -1,5 +1,5 @@
 import type { Bindable } from "../core.js";
-import { type FieldOptions } from "./field.js";
+import { type FieldOptions, type InsetOptions } from "./field.js";
 /**
  * The `<input>` types {@link textline} supports. Deliberately excludes types
  * that need their own widget (`checkbox`, `radio`, `color`, `range`, `file`,
@@ -7,7 +7,7 @@ import { type FieldOptions } from "./field.js";
  */
 export type TextlineType = "text" | "password" | "email" | "number" | "tel" | "url" | "search" | "date" | "time" | "datetime-local" | "month" | "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. */
@@ -32,6 +32,9 @@ 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 declare function textline(opts?: TextlineOptions): void;

package/dist/components/textline.js

@@ -1,5 +1,5 @@
 import A from "aberdeen";
-import { applyControlAttrs, drawField } from "./field.js";
+import { applyControlAttrs, drawField, drawInsets } from "./field.js";
 /**
  * A single-line text input — text, passwords, numbers, email, dates and the other
  * line-oriented `<input>` types. Renders inside the standard {@link drawField}
@@ -9,23 +9,28 @@ import { applyControlAttrs, drawField } from "./field.js";
  * ```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 = {}) {
     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/dist/index.d.ts

@@ -32,7 +32,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";
@@ -49,5 +49,5 @@ 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";
 export type { ContentOptions, Bindable, Slot, Attributes } from "./core.js";

package/dist/index.js

@@ -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 } from "./components/autocomplete.js";
+export { autocomplete, matchWords } from "./components/autocomplete.js";
 export { box } from "./components/box.js";
 export { button, iconButton } from "./components/button.js";
 export { buttonChooser } from "./components/buttonChooser.js";