@dmitryvim/form-builder 0.2.25 → 0.2.27

package/dist/types/components/file/constraints.d.ts

@@ -0,0 +1,26 @@
+export interface FileUploadConstraints {
+    maxCount: number;
+    allowedExtensions: string[];
+    maxSize: number;
+}
+/**
+ * Extract allowed file extensions from the `accept` schema property.
+ * Returns lowercase extension strings without leading dots.
+ */
+export declare function getAllowedExtensions(accept: string | {
+    extensions: string[];
+} | undefined): string[];
+/**
+ * Return true if fileName's extension is in the allowed list,
+ * or if the list is empty (no restriction).
+ */
+export declare function isFileExtensionAllowed(fileName: string, allowedExtensions: string[]): boolean;
+/**
+ * Return true if file is within the size limit.
+ * maxSizeMB === Infinity means no limit.
+ */
+export declare function isFileSizeAllowed(file: File, maxSizeMB: number): boolean;
+/**
+ * Add prefill resource IDs to resourceIndex with type inferred from filename extension.
+ */
+export declare function addPrefillFilesToIndex(initialFiles: string[], resourceIndex: Map<string, any>): void;

package/dist/types/components/file/dom.d.ts

@@ -0,0 +1,44 @@
+import type { State } from "../../types/state.js";
+export declare const TILE_SIZE = "160px";
+/**
+ * Create a base square tile element (TILE_SIZE × TILE_SIZE).
+ * Applies .fb-tile so theme variables control background/radius.
+ */
+export declare function createFileTile(): HTMLElement;
+/**
+ * Show an inline error message below the nearest .space-y-2 ancestor.
+ */
+export declare function showFileError(container: HTMLElement, message: string): void;
+/**
+ * Remove any inline file error message below the nearest .space-y-2 ancestor.
+ */
+export declare function clearFileError(container: HTMLElement): void;
+/**
+ * Render (or replace) a delete-overlay with a centred "Delete" button on a tile.
+ * Used by the single-file edit-mode path.
+ */
+export declare function addDeleteButton(container: HTMLElement, state: State, onDelete: () => void): void;
+/**
+ * Find the hidden <input type="file"> picker by traversing up to the
+ * nearest [data-files-wrapper] ancestor.
+ */
+export declare function findFilePicker(container: HTMLElement): HTMLInputElement | null;
+/**
+ * Build a compact uploading-state tile (spinner + filename label).
+ */
+export declare function createUploadingTile(fileName: string, state: State): HTMLElement;
+/**
+ * Ensure a .fb-tiles-wrap + .fb-add-tile scaffold exists inside `list`.
+ * When the field starts empty, the list only has a .fb-file-dropzone; this
+ * function replaces it with the tile-row layout so upload placeholders land
+ * in the correct flex container.
+ */
+export declare function ensureTilesWrap(list: HTMLElement): HTMLElement;
+/**
+ * Render a placeholder empty-container (single-file edit mode).
+ */
+export declare function setEmptyFileContainer(fileContainer: HTMLElement, state: State, hint?: string): void;
+/**
+ * Set up drag-and-drop on an element, calling dropHandler with the dropped FileList.
+ */
+export declare function setupDragAndDrop(element: HTMLElement, dropHandler: (files: FileList) => void): void;

package/dist/types/components/file/preview.d.ts

@@ -0,0 +1,69 @@
+import type { State } from "../../types/state.js";
+import type { ResourceMetadata } from "../../types/config.js";
+import type { FileDeps } from "./upload.js";
+export interface TileActionOptions {
+    canRemove: boolean;
+    removeHandler: (() => void) | null;
+    state: State;
+    resourceId: string;
+    fileName: string;
+    /**
+     * The resource metadata. Used both to drive capability gating (a local
+     * `meta.file` is a valid download/open source even without network handlers)
+     * and as a fallback at click time so the user can always download/open a
+     * just-uploaded file.
+     */
+    meta?: ResourceMetadata;
+}
+/**
+ * Build a horizontal row of icon-only action buttons for a file tile.
+ * Download and Open-in-new-tab are capability-gated — they're rendered only
+ * when the configured handlers (or a local meta.file) can fulfil them.
+ * Remove is rendered only in edit mode.
+ */
+export declare function createTileActions(options: TileActionOptions): HTMLElement;
+export declare function releaseLocalFileUrl(file: File | undefined | null): void;
+/**
+ * Populate a single-file edit-mode container with a file preview.
+ * Handles both local (pre-upload) Files and uploaded resource IDs.
+ */
+export declare function renderFilePreview(container: HTMLElement, resourceId: string, state: State, options?: {
+    fileName?: string;
+    isReadonly?: boolean;
+    deps?: FileDeps | null;
+}): Promise<void>;
+/**
+ * Build and return a compact 160×160 readonly tile for a single resource.
+ * Click opens the resource via getDownloadUrl / getThumbnail / downloadFile.
+ * Action icon buttons (download, open, optional remove) appear on hover.
+ */
+export declare function renderFilePreviewReadonly(resourceId: string, state: State, fileName?: string, options?: {
+    canRemove?: boolean;
+    removeHandler?: (() => void) | null;
+}): Promise<HTMLElement>;
+/**
+ * Render (or replace) the single-file edit container with a compact 160×160 tile.
+ * Called after a file is selected/uploaded, or when the field has prefill data.
+ * Mirrors renderFilePreviewReadonly but always includes a remove (✕) action button.
+ *
+ * Delegates entirely to renderFilePreviewReadonly with canRemove:true.
+ * getThumbnail (if configured) provides image/video thumbnails; otherwise the
+ * standard icon fallback is shown — same UX as the post-upload path had before.
+ *
+ * Local image files (just-uploaded, meta.file still set) are treated as uploaded
+ * resources: getThumbnail is tried first; if absent the 🖼️ icon is shown.
+ * This avoids running FileReader in single-file edit mode (consistent behaviour).
+ *
+ * Video files (local or uploaded) are NOT handled here; the caller keeps them
+ * on the old native-<video> path (see render-edit.ts and upload.ts).
+ *
+ * The outer `fileContainer` wrapper is cleared and the tile inserted as its only child.
+ * Removing the tile restores the dropzone via deps.onRemove().
+ */
+export declare function renderSingleFileEditTile(fileContainer: HTMLElement, resourceId: string, state: State, deps: FileDeps): Promise<void>;
+/**
+ * Populate a tile element with thumbnail / icon content for a resource.
+ * Used by renderResourcePills for both edit and readonly multi-file tiles.
+ * actionsEl: pre-built action button group to attach to the tile (and zoom popup).
+ */
+export declare function fillTileContent(tile: HTMLElement, rid: string, meta: ResourceMetadata | undefined, state: State, actionsEl?: HTMLElement): Promise<void>;

package/dist/types/components/file/render-edit.d.ts

@@ -0,0 +1,15 @@
+import type { State } from "../../types/state.js";
+import type { FileElement, FilesElement, RenderContext } from "../../types/index.js";
+export { TILE_SIZE } from "./dom.js";
+/**
+ * Populate `container` with the tile grid for multi-file fields.
+ * In edit mode: renders tiles + hover-X removal + "+" add tile.
+ * In readonly mode (isReadonly=true): renders tiles only (no add tile, no X).
+ *
+ * Also writes `data-resource-ids` JSON on the nearest [data-files-wrapper]
+ * ancestor so that validateFileElement can read IDs without touching pills.
+ */
+export declare function renderResourcePills(container: HTMLElement, rids: string[] | null, state: State, onRemove: ((rid: string) => void) | null, hint?: string, countInfo?: string, maxCount?: number, isReadonly?: boolean): void;
+export declare function renderFileElementEdit(element: FileElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
+export declare function renderFilesElementEdit(element: FilesElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
+export declare function renderMultipleFileElementEdit(element: FileElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;

package/dist/types/components/file/render-readonly.d.ts

@@ -0,0 +1,23 @@
+import type { State } from "../../types/state.js";
+import type { FileElement, FilesElement, RenderContext } from "../../types/index.js";
+/**
+ * Render a compact 160×160 readonly tile for a single-file field.
+ * If no prefill: shows a styled empty placeholder.
+ */
+export declare function renderFileElementReadonly(element: FileElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
+/**
+ * Render a tile row for a readonly multi-file field.
+ *
+ * Issue 2 fix: exactly N tile elements for N files — no hidden pill stubs.
+ * The [data-files-wrapper] element carries data-resource-ids so validation
+ * can read IDs without touching the tile DOM.
+ */
+export declare function renderMultiFileReadonly(rids: string[], state: State, wrapper: HTMLElement, pathKey: string, marginTop?: string): void;
+/**
+ * Render legacy `files` element in readonly mode.
+ */
+export declare function renderFilesElementReadonly(element: FilesElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
+/**
+ * Render `file` element with `multiple:true` in readonly mode.
+ */
+export declare function renderMultipleFileElementReadonly(element: FileElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;

package/dist/types/components/file/styles.d.ts

@@ -0,0 +1 @@
+export declare function ensureFileStyles(): void;

package/dist/types/components/file/upload.d.ts

@@ -0,0 +1,13 @@
+import type { State } from "../../types/state.js";
+import { type FileUploadConstraints } from "./constraints.js";
+export interface FileDeps {
+    picker: HTMLInputElement;
+    fileUploadHandler: () => void;
+    dragHandler: (files: FileList) => void;
+    setupDrop?: (container: HTMLElement) => void;
+    /** Called by the tile's remove button in single-file edit mode */
+    onRemove?: () => void;
+}
+export declare function handleFileSelect(file: File, container: HTMLElement, fieldName: string, state: State, deps?: FileDeps | null, instance?: any, allowedExtensions?: string[], maxSizeMB?: number): Promise<void>;
+export declare function setupFilesDropHandler(filesContainer: HTMLElement, resourceIds: string[], state: State, updateCallback: () => void, constraints: FileUploadConstraints, pathKey?: string, instance?: any): void;
+export declare function setupFilesPickerHandler(filesPicker: HTMLInputElement, resourceIds: string[], state: State, updateCallback: () => void, constraints: FileUploadConstraints, pathKey?: string, instance?: any): void;

package/dist/types/components/file/validate.d.ts

@@ -0,0 +1,13 @@
+import type { Element, ValidationResult } from "../../types/index.js";
+import type { ComponentContext } from "../../types/index.js";
+/**
+ * Read the resource ID list for a multi-file field.
+ * Source of truth: `data-resource-ids` JSON attribute on [data-files-wrapper].
+ * Throws if the attribute is present but unparseable — that indicates a render bug.
+ */
+export declare function readMultiFileResourceIds(scopeRoot: HTMLElement, fullKey: string): string[];
+/**
+ * Validate file field and return extracted value with errors.
+ * Reads from state (resourceIndex + data-resource-ids attribute) — no DOM shape dependency.
+ */
+export declare function validateFileElement(element: Element, key: string, context: ComponentContext): ValidationResult;

package/dist/types/components/file.d.ts

@@ -1,31 +1,9 @@
-import type { FileElement, FilesElement, RenderContext, ComponentContext, ValidationResult, Element } from "../types/index.js";
-import type { State } from "../types/state.js";
-interface FileDeps {
-    picker: HTMLInputElement;
-    fileUploadHandler: () => void;
-    dragHandler: (files: FileList) => void;
-}
-export declare function getAllowedExtensions(accept: string | {
-    extensions: string[];
-} | undefined): string[];
-export declare function isFileExtensionAllowed(fileName: string, allowedExtensions: string[]): boolean;
-export declare function isFileSizeAllowed(file: File, maxSizeMB: number): boolean;
-export declare function renderFilePreview(container: HTMLElement, resourceId: string, state: State, options?: {
-    fileName?: string;
-    isReadonly?: boolean;
-    deps?: FileDeps | null;
-}): Promise<void>;
-export declare function renderFilePreviewReadonly(resourceId: string, state: State, fileName?: string): Promise<HTMLElement>;
-export declare function renderResourcePills(container: HTMLElement, rids: string[] | null, state: State, onRemove: ((rid: string) => void) | null, hint?: string, countInfo?: string): void;
+import type { FileElement, FilesElement, RenderContext, ComponentContext, Element } from "../types/index.js";
+export { getAllowedExtensions, isFileExtensionAllowed, isFileSizeAllowed } from "./file/constraints.js";
+export { renderFilePreview, renderFilePreviewReadonly } from "./file/preview.js";
+export { renderResourcePills } from "./file/render-edit.js";
+export { validateFileElement } from "./file/validate.js";
 export declare function renderFileElement(element: FileElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
 export declare function renderFilesElement(element: FilesElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
 export declare function renderMultipleFileElement(element: FileElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
-/**
- * Validate file field and return extracted value with errors
- */
-export declare function validateFileElement(element: Element, key: string, context: ComponentContext): ValidationResult;
-/**
- * Update file field value in DOM without re-render
- */
 export declare function updateFileField(element: Element, fieldPath: string, value: any, context: ComponentContext): void;
-export {};

package/dist/types/types/config.d.ts

@@ -7,6 +7,8 @@ export interface Translations {
     noFileSelected: string;
     noFilesSelected: string;
     downloadButton: string;
+    downloadFile: string;
+    openInNewTab: string;
     changeButton: string;
     placeholderText: string;
     previewAlt: string;
@@ -27,6 +29,8 @@ export interface Translations {
     fileCountSingle: string;
     fileCountPlural: string;
     fileCountRange: string;
+    uploadingFile: string;
+    filesCounter: string;
     required: string;
     minItems: string;
     maxItems: string;

package/dist/types/types/schema.d.ts

@@ -30,6 +30,7 @@ export interface BaseElement {
     hint?: string;
     required?: boolean;
     hidden?: boolean;
+    readonly?: boolean;
     default?: any;
     actions?: ElementAction[];
     enableIf?: EnableCondition;
@@ -216,4 +217,5 @@ export interface RenderContext {
     formData?: Record<string, any>;
     state: import("./state.js").State;
     instance?: any;
+    inheritedReadonly?: boolean;
 }

package/dist/types/utils/helpers.d.ts

@@ -1,3 +1,9 @@
+import type { State } from "../types/state.js";
+export declare function isElementReadonly(element: {
+    readonly?: boolean;
+}, state: State, ctx?: {
+    inheritedReadonly?: boolean;
+}): boolean;
 export declare function isPlainObject(obj: any): obj is Record<string, any>;
 /**
  * Escape HTML special characters to prevent XSS

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.25",
+  "version": "0.2.27",
   "description": "A reusable JSON schema form builder library",
   "main": "./dist/cjs/index.cjs",
   "module": "./dist/esm/index.js",