@marianmeres/stuic 3.152.0 → 3.154.0

package/dist/components/FieldsBuilder/_internal/OptionsEditor.svelte

@@ -0,0 +1,296 @@
+<!--
+	INTERNAL to FieldsBuilder — not exported from the package.
+
+	Editor for a choice-type field's option list (`FieldOptionDef[]`): add,
+	remove, reorder (buttons), localized labels, and auto-derived machine
+	values. Note this deliberately does NOT reuse `FieldOptions` — that
+	component is a select-from-a-list picker, not an option-list author.
+
+	Value derivation mirrors the field-key policy: while an option's value is
+	untouched, it is derived from the label (slugified, unique among sibling
+	values); the first manual edit stops derivation for that option. Options
+	present at mount never re-derive (their value may already identify stored
+	data).
+
+	Each option carries internal meta ({ oid, touched }) kept in lockstep with
+	the bound `options` array. The #each is keyed by `oid` so reordering MOVES
+	the DOM rows — focus travels with the row — and a focus-follow pass (same
+	pattern as the parent's focusRowButton) covers the disabled-at-boundary
+	case. Moves/removals are announced via a local polite live region.
+-->
+<script lang="ts">
+	import { tick } from "svelte";
+	import { tooltip } from "../../../actions/index.js";
+	import {
+		iconArrowDown,
+		iconArrowUp,
+		iconPlus,
+		iconTrash,
+	} from "../../../icons/index.js";
+	import { getId } from "../../../utils/get-id.js";
+	import { twMerge } from "../../../utils/tw-merge.js";
+	import type { TranslateFn } from "../../../types.js";
+	import type { FieldOptionDef } from "../types.js";
+	import { getLocalizedText, slugifyKey, uniqueKey } from "../utils.js";
+	import LocalizedTextInput from "./LocalizedTextInput.svelte";
+
+	interface Props {
+		options?: FieldOptionDef[];
+		languages?: string[];
+		defaultLanguage?: string;
+		languageLabels?: Record<string, string>;
+		disabled?: boolean;
+		/** `lock.options` — render the list read-only. */
+		locked?: boolean;
+		tabindex?: number;
+		t?: TranslateFn;
+		/** Fired after any change to `options`. */
+		onChange?: () => void;
+	}
+
+	let {
+		options = $bindable(),
+		languages,
+		defaultLanguage,
+		languageLabels,
+		disabled = false,
+		locked = false,
+		tabindex = 0,
+		t = (k: string) => k,
+		onChange,
+	}: Props = $props();
+
+	const _defaultLanguage = $derived(defaultLanguage || languages?.[0]);
+
+	interface OptionMeta {
+		/** Stable render id (options themselves have no identity). */
+		oid: string;
+		/** Value manually edited — derivation stops. Mount-time options: true. */
+		touched: boolean;
+	}
+
+	// index-aligned with `options`; every mutation below keeps them in lockstep
+	let meta: OptionMeta[] = $state(
+		(options ?? []).map(() => ({ oid: getId(), touched: true }))
+	);
+
+	let rootEl: HTMLElement | undefined = $state();
+	let labelEditors: Record<string, LocalizedTextInput | undefined> = $state({});
+	let liveAnnouncement = $state("");
+
+	const _readonly = $derived(disabled || locked);
+
+	function sync() {
+		onChange?.();
+	}
+
+	// clear-then-set so repeated identical announcements still get read out
+	function announce(
+		key: string,
+		option: FieldOptionDef,
+		values?: Record<string, number>
+	) {
+		liveAnnouncement = "";
+		const msg = String(
+			t(key, { label: getLocalizedText(option.label, _defaultLanguage), ...values })
+		);
+		tick().then(() => (liveAnnouncement = msg));
+	}
+
+	function addOption() {
+		const m: OptionMeta = { oid: getId(), touched: false };
+		options = [...(options ?? []), { value: "", label: "" }];
+		meta = [...meta, m];
+		sync();
+		tick().then(() => labelEditors[m.oid]?.focus?.());
+	}
+
+	function removeOption(idx: number) {
+		const option = (options ?? [])[idx];
+		options = (options ?? []).filter((_, i) => i !== idx);
+		meta = meta.filter((_, i) => i !== idx);
+		sync();
+		if (option) announce("removed_option", option);
+	}
+
+	function moveOption(from: number, to: number) {
+		const list = options ?? [];
+		if (to < 0 || to >= list.length || from === to) return;
+		const nextOptions = [...list];
+		const [movedOption] = nextOptions.splice(from, 1);
+		nextOptions.splice(to, 0, movedOption);
+		options = nextOptions;
+		const nextMeta = [...meta];
+		const [movedMeta] = nextMeta.splice(from, 1);
+		nextMeta.splice(to, 0, movedMeta);
+		meta = nextMeta;
+		sync();
+		announce(to < from ? "moved_up" : "moved_down", movedOption, {
+			position: to + 1,
+			total: nextOptions.length,
+		});
+		focusOptionButton(movedMeta.oid, to < from ? "up" : "down");
+	}
+
+	// same pattern as the parent's focusRowButton: re-focus the pressed logical
+	// button on the moved row; at a boundary fall back to any enabled one
+	function focusOptionButton(oid: string, which: "up" | "down") {
+		tick().then(() => {
+			const rowEl = rootEl?.querySelector<HTMLElement>(`[data-opt-row="${oid}"]`);
+			if (!rowEl) return;
+			let btn = rowEl.querySelector<HTMLButtonElement>(`[data-opt-btn="${which}"]`);
+			if (!btn || btn.disabled) {
+				btn =
+					rowEl.querySelector<HTMLButtonElement>(`[data-opt-btn="up"]:not([disabled])`) ||
+					rowEl.querySelector<HTMLButtonElement>(`[data-opt-btn="down"]:not([disabled])`);
+			}
+			btn?.focus();
+		});
+	}
+
+	function onLabelInput(idx: number) {
+		const list = options ?? [];
+		const option = list[idx];
+		if (!option || meta[idx]?.touched) return sync();
+		const base = slugifyKey(getLocalizedText(option.label, _defaultLanguage));
+		option.value = base
+			? uniqueKey(base, (v) => list.some((o, i) => i !== idx && o.value === v))
+			: "";
+		sync();
+	}
+
+	function onValueInput(idx: number, newValue: string) {
+		const option = (options ?? [])[idx];
+		if (!option) return;
+		if (meta[idx]) meta[idx].touched = true;
+		option.value = newValue;
+		sync();
+	}
+
+	const INPUT_CLS = [
+		"rounded bg-(--stuic-color-input)",
+		"border border-(--stuic-color-border)",
+		"focus:border-(--stuic-color-border-hover)",
+		"focus:outline-none focus:ring-0",
+		"focus-visible:outline-none focus-visible:ring-0",
+	].join(" ");
+
+	const VALUE_INPUT_CLS = twMerge(INPUT_CLS, "font-mono text-sm");
+
+	const BTN_CLS = [
+		"p-1 rounded",
+		"opacity-50 hover:opacity-100",
+		"hover:bg-(--stuic-color-muted)",
+		"focus-visible:outline-(--stuic-color-border-hover)",
+		"disabled:opacity-25 disabled:cursor-not-allowed disabled:hover:bg-transparent",
+	].join(" ");
+</script>
+
+<div class="fb-options w-full" bind:this={rootEl}>
+	{#if locked && !(options ?? []).length}
+		<div class="fb-hint text-sm py-1">{t("empty_options_message")}</div>
+	{/if}
+
+	{#each options ?? [] as option, idx (meta[idx]?.oid ?? idx)}
+		<div
+			class={twMerge(
+				"fb-option-row flex items-center gap-1.5 py-1",
+				idx > 0 && "fb-option-divider"
+			)}
+			data-opt-row={meta[idx]?.oid}
+		>
+			{#if !locked}
+				<div class="flex flex-col shrink-0">
+					<button
+						type="button"
+						class={twMerge(BTN_CLS, "p-0.5")}
+						data-opt-btn="up"
+						onclick={() => moveOption(idx, idx - 1)}
+						disabled={_readonly || idx === 0}
+						aria-label={String(t("move_up"))}
+					>
+						{@html iconArrowUp({ size: 12 })}
+					</button>
+					<button
+						type="button"
+						class={twMerge(BTN_CLS, "p-0.5")}
+						data-opt-btn="down"
+						onclick={() => moveOption(idx, idx + 1)}
+						disabled={_readonly || idx === (options?.length ?? 0) - 1}
+						aria-label={String(t("move_down"))}
+					>
+						{@html iconArrowDown({ size: 12 })}
+					</button>
+				</div>
+			{/if}
+
+			<div class="flex-1 min-w-0">
+				<!-- locked -> readonly (NOT disabled): the labels and their
+				     translations must stay reachable and readable -->
+				<LocalizedTextInput
+					bind:value={option.label}
+					bind:this={labelEditors[meta[idx]?.oid ?? String(idx)]}
+					{languages}
+					{defaultLanguage}
+					{languageLabels}
+					{disabled}
+					readonly={locked}
+					{tabindex}
+					{t}
+					class={INPUT_CLS}
+					placeholder={String(t("option_label_placeholder"))}
+					ariaLabel={String(t("option_label_placeholder"))}
+					onInput={() => onLabelInput(idx)}
+				/>
+			</div>
+
+			<input
+				type="text"
+				value={option.value}
+				oninput={(e) => onValueInput(idx, e.currentTarget.value)}
+				class={twMerge(VALUE_INPUT_CLS, "fb-option-value w-28 sm:w-36 shrink-0")}
+				readonly={locked}
+				{disabled}
+				{tabindex}
+				placeholder={String(t("option_value_placeholder"))}
+				aria-label={String(t("option_value_placeholder"))}
+				use:tooltip={() => ({ enabled: !_readonly, content: t("option_value_hint") })}
+			/>
+
+			{#if !locked}
+				<button
+					type="button"
+					class={twMerge(BTN_CLS, "shrink-0")}
+					onclick={() => removeOption(idx)}
+					disabled={_readonly}
+					aria-label={String(t("remove_option"))}
+					use:tooltip={() => ({ enabled: !_readonly, content: t("remove_option") })}
+				>
+					{@html iconTrash({ size: 14 })}
+				</button>
+			{/if}
+		</div>
+	{/each}
+
+	{#if !locked}
+		<button
+			type="button"
+			onclick={addOption}
+			class={twMerge(
+				"fb-add-option-btn",
+				"flex items-center gap-1 text-sm opacity-75 hover:opacity-100",
+				"bg-(--stuic-color-muted)",
+				"p-1 pr-2 rounded hover:bg-(--stuic-color-muted-hover)",
+				"disabled:opacity-25 disabled:cursor-not-allowed",
+				(options ?? []).length > 0 && "mt-1"
+			)}
+			{disabled}
+			{tabindex}
+		>
+			{@html iconPlus({ size: 14 })}
+			<span>{t("add_option")}</span>
+		</button>
+	{/if}
+
+	<div class="sr-only" aria-live="polite">{liveAnnouncement}</div>
+</div>

package/dist/components/FieldsBuilder/_internal/OptionsEditor.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { TranslateFn } from "../../../types.js";
+import type { FieldOptionDef } from "../types.js";
+interface Props {
+    options?: FieldOptionDef[];
+    languages?: string[];
+    defaultLanguage?: string;
+    languageLabels?: Record<string, string>;
+    disabled?: boolean;
+    /** `lock.options` — render the list read-only. */
+    locked?: boolean;
+    tabindex?: number;
+    t?: TranslateFn;
+    /** Fired after any change to `options`. */
+    onChange?: () => void;
+}
+declare const OptionsEditor: import("svelte").Component<Props, {}, "options">;
+type OptionsEditor = ReturnType<typeof OptionsEditor>;
+export default OptionsEditor;

package/dist/components/FieldsBuilder/i18n-sk.d.ts

@@ -0,0 +1,22 @@
+import type { FieldTypeDef } from "./types.js";
+import type { FieldsBuilderMessages } from "./i18n.js";
+/**
+ * Slovak message catalog for `FieldsBuilder`. Opt-in — English stays the
+ * built-in default, and this module is only pulled into a bundle when it is
+ * actually imported (the component itself never references it).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createFieldsBuilderT, FIELDS_BUILDER_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createFieldsBuilderT(FIELDS_BUILDER_MESSAGES_SK);
+ * </script>
+ * ```
+ */
+export declare const FIELDS_BUILDER_MESSAGES_SK: FieldsBuilderMessages;
+/**
+ * Slovak counterpart of `FIELDS_BUILDER_DEFAULT_TYPES` — the `types` palette is
+ * consumer-owned data (and a required prop), so translating the messages alone
+ * would still leave the type select in English.
+ */
+export declare const FIELDS_BUILDER_DEFAULT_TYPES_SK: FieldTypeDef[];

package/dist/components/FieldsBuilder/i18n-sk.js

@@ -0,0 +1,81 @@
+/**
+ * Slovak message catalog for `FieldsBuilder`. Opt-in — English stays the
+ * built-in default, and this module is only pulled into a bundle when it is
+ * actually imported (the component itself never references it).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createFieldsBuilderT, FIELDS_BUILDER_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createFieldsBuilderT(FIELDS_BUILDER_MESSAGES_SK);
+ * </script>
+ * ```
+ */
+export const FIELDS_BUILDER_MESSAGES_SK = {
+    field_req_att: "Toto pole vyžaduje pozornosť. Skontrolujte ho a skúste to znova.",
+    at_least_one_field: "Vyžaduje sa aspoň jedno pole",
+    add_label: "Pridať pole",
+    empty_message: "Zatiaľ žiadne polia",
+    empty_options_message: "Nie sú definované žiadne možnosti",
+    untitled: "Nepomenované pole",
+    deleted: "Zmazané",
+    delete_field: "Zmazať pole",
+    undo_delete: "Späť",
+    removed_field: "Zmazané pole: {{label}}",
+    restored_field: "Obnovené pole: {{label}}",
+    move_up: "Posunúť vyššie",
+    move_down: "Posunúť nižšie",
+    moved_up: "Posunuté vyššie: {{label}} ({{position}} z {{total}})",
+    moved_down: "Posunuté nižšie: {{label}} ({{position}} z {{total}})",
+    row_has_errors: "Obsahuje chyby",
+    drag_to_reorder: "Potiahnutím zmeníte poradie",
+    label_label: "Názov",
+    label_placeholder: "Názov poľa",
+    description_label: "Popis",
+    type_label: "Typ",
+    required_label: "Povinné",
+    options_label: "Možnosti",
+    add_option: "Pridať možnosť",
+    option_label_placeholder: "Názov možnosti",
+    option_value_placeholder: "hodnota",
+    option_value_hint: "Uložená strojová hodnota tejto možnosti",
+    remove_option: "Odstrániť možnosť",
+    removed_option: "Odstránená možnosť: {{label}}",
+    advanced_label: "Rozšírené",
+    key_label: "Kľúč",
+    key_hint: "Jedinečný strojový identifikátor tohto poľa. Vypĺňa sa automaticky z názvu.",
+    key_locked_hint: "Kľúč identifikuje uložené údaje a už sa nedá zmeniť.",
+    show_translations: "Zobraziť preklady",
+    hide_translations: "Skryť preklady",
+    type_change_warning: "Zmena typu existujúceho poľa nemusí sedieť s údajmi, ktoré sú pod ním už uložené.",
+    unknown_type_warning: "Toto pole má typ, ktorý tento editor nepozná. Zostáva nezmenené a nedá sa tu upravovať.",
+    preview_label: "Náhľad",
+    err_label_required: "Názov je povinný",
+    err_key_required: "Kľúč je povinný",
+    err_key_pattern: "Kľúč musí začínať malým písmenom a môže obsahovať iba malé písmená, číslice a podčiarkovníky",
+    err_key_maxlength: "Kľúč je príliš dlhý (max. {{max}} znakov)",
+    err_key_duplicate: "Tento kľúč už používa iné pole",
+    err_key_reserved: "Tento kľúč je rezervovaný a nedá sa použiť",
+    err_options_required: "Pridajte aspoň jednu možnosť",
+    err_option_value_required: "Každá možnosť musí mať hodnotu",
+    err_option_value_duplicate: "Hodnoty možností musia byť jedinečné",
+    err_max_fields: "Maximálny počet polí je {{max}}",
+};
+/**
+ * Slovak counterpart of `FIELDS_BUILDER_DEFAULT_TYPES` — the `types` palette is
+ * consumer-owned data (and a required prop), so translating the messages alone
+ * would still leave the type select in English.
+ */
+export const FIELDS_BUILDER_DEFAULT_TYPES_SK = [
+    { type: "text", label: "Text", description: "Jeden riadok textu" },
+    { type: "longtext", label: "Dlhý text", description: "Viac riadkov textu" },
+    { type: "number", label: "Číslo", description: "Číselná hodnota" },
+    { type: "checkbox", label: "Áno / nie", description: "Jedno zaškrtávacie políčko" },
+    {
+        type: "select",
+        label: "Výber",
+        description: "Výber jednej z ponúkaných možností",
+        supportsOptions: true,
+    },
+    { type: "date", label: "Dátum", description: "Kalendárny dátum" },
+];

package/dist/components/FieldsBuilder/i18n.d.ts

@@ -0,0 +1,84 @@
+import type { TranslateFn } from "../../types.js";
+/**
+ * The built-in (English) message catalog of `FieldsBuilder`. Also the fallback
+ * of every other bundled locale, so a locale missing a key still renders text.
+ *
+ * Placeholders are mustache-style (`{{label}}`, `{{max}}`, ...).
+ */
+export declare const FIELDS_BUILDER_MESSAGES_EN: {
+    field_req_att: string;
+    at_least_one_field: string;
+    add_label: string;
+    empty_message: string;
+    empty_options_message: string;
+    untitled: string;
+    deleted: string;
+    delete_field: string;
+    undo_delete: string;
+    removed_field: string;
+    restored_field: string;
+    move_up: string;
+    move_down: string;
+    moved_up: string;
+    moved_down: string;
+    row_has_errors: string;
+    drag_to_reorder: string;
+    label_label: string;
+    label_placeholder: string;
+    description_label: string;
+    type_label: string;
+    required_label: string;
+    options_label: string;
+    add_option: string;
+    option_label_placeholder: string;
+    option_value_placeholder: string;
+    option_value_hint: string;
+    remove_option: string;
+    removed_option: string;
+    advanced_label: string;
+    key_label: string;
+    key_hint: string;
+    key_locked_hint: string;
+    show_translations: string;
+    hide_translations: string;
+    type_change_warning: string;
+    unknown_type_warning: string;
+    preview_label: string;
+    err_label_required: string;
+    err_key_required: string;
+    err_key_pattern: string;
+    err_key_maxlength: string;
+    err_key_duplicate: string;
+    err_key_reserved: string;
+    err_options_required: string;
+    err_option_value_required: string;
+    err_option_value_duplicate: string;
+    err_max_fields: string;
+};
+/** Every message key `FieldsBuilder` (and its internals) may look up. */
+export type FieldsBuilderMessageKey = keyof typeof FIELDS_BUILDER_MESSAGES_EN;
+/** A (possibly partial) catalog for one locale. */
+export type FieldsBuilderMessages = Record<FieldsBuilderMessageKey, string>;
+/**
+ * Builds the `t` prop of `FieldsBuilder` from a message catalog. Unknown or
+ * untranslated keys fall back to `fallbackMessages` (English by default), so a
+ * catalog may safely be partial and never renders a raw key.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import {
+ *     FieldsBuilder,
+ *     createFieldsBuilderT,
+ *     FIELDS_BUILDER_MESSAGES_SK,
+ *     FIELDS_BUILDER_DEFAULT_TYPES_SK,
+ *   } from "@marianmeres/stuic";
+ *   const t = createFieldsBuilderT(FIELDS_BUILDER_MESSAGES_SK);
+ * </script>
+ *
+ * <FieldsBuilder bind:value name="fields" types={FIELDS_BUILDER_DEFAULT_TYPES_SK} {t} />
+ * ```
+ */
+export declare function createFieldsBuilderT(messages: Partial<FieldsBuilderMessages> | Record<string, string>, fallbackMessages?: Partial<FieldsBuilderMessages> | Record<string, string>): TranslateFn;
+/** The component's built-in English `t`. */
+export declare const t_default: TranslateFn;

package/dist/components/FieldsBuilder/i18n.js

@@ -0,0 +1,90 @@
+import { isPlainObject } from "../../utils/is-plain-object.js";
+import { replaceMap } from "../../utils/replace-map.js";
+/**
+ * The built-in (English) message catalog of `FieldsBuilder`. Also the fallback
+ * of every other bundled locale, so a locale missing a key still renders text.
+ *
+ * Placeholders are mustache-style (`{{label}}`, `{{max}}`, ...).
+ */
+export const FIELDS_BUILDER_MESSAGES_EN = {
+    field_req_att: "This field requires attention. Please review and try again.",
+    at_least_one_field: "At least one field is required",
+    add_label: "Add field",
+    empty_message: "No fields yet",
+    empty_options_message: "No choices defined",
+    untitled: "Untitled field",
+    deleted: "Deleted",
+    delete_field: "Delete field",
+    undo_delete: "Undo",
+    removed_field: "Deleted field: {{label}}",
+    restored_field: "Restored field: {{label}}",
+    move_up: "Move up",
+    move_down: "Move down",
+    moved_up: "Moved up: {{label}} ({{position}} of {{total}})",
+    moved_down: "Moved down: {{label}} ({{position}} of {{total}})",
+    row_has_errors: "Has validation errors",
+    drag_to_reorder: "Drag to reorder",
+    label_label: "Label",
+    label_placeholder: "Field name",
+    description_label: "Description",
+    type_label: "Type",
+    required_label: "Required",
+    options_label: "Choices",
+    add_option: "Add choice",
+    option_label_placeholder: "Choice label",
+    option_value_placeholder: "value",
+    option_value_hint: "Stored machine value of this choice",
+    remove_option: "Remove choice",
+    removed_option: "Removed choice: {{label}}",
+    advanced_label: "Advanced",
+    key_label: "Key",
+    key_hint: "Unique machine identifier of this field. Filled in automatically from the label.",
+    key_locked_hint: "The key identifies stored data and can no longer be changed.",
+    show_translations: "Show translations",
+    hide_translations: "Hide translations",
+    type_change_warning: "Changing the type of an existing field may not fit data already stored under it.",
+    unknown_type_warning: "This field has a type this editor does not recognize. It is kept unchanged and cannot be edited here.",
+    preview_label: "Preview",
+    err_label_required: "Label is required",
+    err_key_required: "Key is required",
+    err_key_pattern: "Key must start with a lowercase letter and may contain only lowercase letters, numbers and underscores",
+    err_key_maxlength: "Key is too long (max {{max}} characters)",
+    err_key_duplicate: "This key is already used by another field",
+    err_key_reserved: "This key is reserved and cannot be used",
+    err_options_required: "Add at least one choice",
+    err_option_value_required: "Every choice needs a value",
+    err_option_value_duplicate: "Choice values must be unique",
+    err_max_fields: "Maximum number of fields is {{max}}",
+};
+/**
+ * Builds the `t` prop of `FieldsBuilder` from a message catalog. Unknown or
+ * untranslated keys fall back to `fallbackMessages` (English by default), so a
+ * catalog may safely be partial and never renders a raw key.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import {
+ *     FieldsBuilder,
+ *     createFieldsBuilderT,
+ *     FIELDS_BUILDER_MESSAGES_SK,
+ *     FIELDS_BUILDER_DEFAULT_TYPES_SK,
+ *   } from "@marianmeres/stuic";
+ *   const t = createFieldsBuilderT(FIELDS_BUILDER_MESSAGES_SK);
+ * </script>
+ *
+ * <FieldsBuilder bind:value name="fields" types={FIELDS_BUILDER_DEFAULT_TYPES_SK} {t} />
+ * ```
+ */
+export function createFieldsBuilderT(messages, fallbackMessages = FIELDS_BUILDER_MESSAGES_EN) {
+    return (k, values = null, fallback = "") => {
+        const out = messages[k] ??
+            fallbackMessages[k] ??
+            (typeof fallback === "string" ? fallback : k);
+        return isPlainObject(values)
+            ? replaceMap(out, values)
+            : out;
+    };
+}
+/** The component's built-in English `t`. */
+export const t_default = createFieldsBuilderT(FIELDS_BUILDER_MESSAGES_EN);