@xelqun/forms 0.1.0 → 0.2.0

package/resources/js/core/images.ts

@@ -0,0 +1,110 @@
+export interface ImageResize {
+    ratio?: string | null;
+    mode?: 'force' | 'cover' | 'contain' | null;
+    width?: number | null;
+    height?: number | null;
+    upscale?: boolean;
+}
+
+export interface ImageFrame {
+    /** The part of the source to draw. */
+    crop: { x: number; y: number; width: number; height: number };
+    width: number;
+    height: number;
+}
+
+function parseRatio(ratio: string | null | undefined): number | null {
+    const [width, height] = (ratio ?? '').split(':').map(Number);
+
+    return width > 0 && height > 0 ? width / height : null;
+}
+
+/** The middle of the source at this shape. */
+function centerCrop(sourceWidth: number, sourceHeight: number, ratio: number): ImageFrame['crop'] {
+    const width = Math.min(sourceWidth, sourceHeight * ratio);
+    const height = width / ratio;
+
+    return {
+        x: (sourceWidth - width) / 2,
+        y: (sourceHeight - height) / 2,
+        width,
+        height,
+    };
+}
+
+/**
+ * What to draw, and at what size. Works on numbers alone, so the rules can be
+ * tested without a canvas.
+ */
+export function computeFrame(
+    sourceWidth: number,
+    sourceHeight: number,
+    { ratio, mode, width, height, upscale = true }: ImageResize,
+): ImageFrame {
+    const shape = parseRatio(ratio);
+    let crop = shape
+        ? centerCrop(sourceWidth, sourceHeight, shape)
+        : { x: 0, y: 0, width: sourceWidth, height: sourceHeight };
+
+    if (!width && !height) {
+        return { crop, width: Math.round(crop.width), height: Math.round(crop.height) };
+    }
+
+    const aspect = crop.width / crop.height;
+    const boxWidth = width ?? height! * aspect;
+    const boxHeight = height ?? width! / aspect;
+
+    if (mode === 'cover') {
+        const inner = centerCrop(crop.width, crop.height, boxWidth / boxHeight);
+
+        crop = { ...inner, x: crop.x + inner.x, y: crop.y + inner.y };
+    }
+
+    if (mode === 'force' || mode === 'cover') {
+        const outputWidth = upscale ? boxWidth : Math.min(boxWidth, crop.width);
+        const outputHeight = upscale ? boxHeight : Math.min(boxHeight, crop.height);
+
+        return { crop, width: Math.round(outputWidth), height: Math.round(outputHeight) };
+    }
+
+    const fit = Math.min(boxWidth / crop.width, boxHeight / crop.height);
+    const scale = upscale ? fit : Math.min(fit, 1);
+
+    return { crop, width: Math.round(crop.width * scale), height: Math.round(crop.height * scale) };
+}
+
+/**
+ * Crop and resize a picked image in the browser, before it uploads. Anything
+ * this can't redraw goes up as it is: an animated GIF would lose its frames.
+ */
+export async function prepareImage(
+    file: File,
+    resize: ImageResize | null | undefined,
+): Promise<File> {
+    if (!resize || !['image/png', 'image/jpeg', 'image/webp'].includes(file.type)) {
+        return file;
+    }
+
+    // Sent as it is, a file the browser can't read gets a proper reason from the server.
+    const bitmap = await createImageBitmap(file).catch(() => null);
+
+    if (!bitmap) {
+        return file;
+    }
+
+    const { crop, width, height } = computeFrame(bitmap.width, bitmap.height, resize);
+    const canvas = document.createElement('canvas');
+
+    canvas.width = width;
+    canvas.height = height;
+    canvas
+        .getContext('2d')
+        ?.drawImage(bitmap, crop.x, crop.y, crop.width, crop.height, 0, 0, width, height);
+    bitmap.close();
+
+    return new Promise((resolve) => {
+        canvas.toBlob((blob) => {
+            resolve(blob ? new File([blob], file.name, { type: file.type }) : file);
+        }, file.type);
+    });
+}

package/resources/js/core/log.ts

@@ -1,7 +1,7 @@
 import { reactive } from 'vue';
 import type { UpdatePatch } from '../schema/types';
 
-export type RequestKind = 'update' | 'search' | 'upload';
+export type RequestKind = 'update' | 'search' | 'upload' | 'validate' | 'action';
 
 export interface RequestLogEntry {
     id: number;

package/resources/js/core/markdown.ts

@@ -0,0 +1,61 @@
+export interface TextEdit {
+    text: string;
+    selectionStart: number;
+    selectionEnd: number;
+}
+
+/**
+ * Put marks around the selection, keeping it selected.
+ */
+export function wrapSelection(
+    text: string,
+    start: number,
+    end: number,
+    before: string,
+    after: string,
+    placeholder = '',
+): TextEdit {
+    const inner = text.slice(start, end) || placeholder;
+
+    return {
+        text: `${text.slice(0, start)}${before}${inner}${after}${text.slice(end)}`,
+        selectionStart: start + before.length,
+        selectionEnd: start + before.length + inner.length,
+    };
+}
+
+/**
+ * Start every selected line with a prefix. "#" numbers them, for an ordered list.
+ */
+export function prefixLines(text: string, start: number, end: number, prefix: string): TextEdit {
+    const lineStart = text.lastIndexOf('\n', start - 1) + 1;
+    const nextBreak = text.indexOf('\n', end);
+    const lineEnd = nextBreak === -1 ? text.length : nextBreak;
+    const lines = text
+        .slice(lineStart, lineEnd)
+        .split('\n')
+        .map((line, index) => (prefix === '#' ? `${index + 1}. ${line}` : `${prefix}${line}`))
+        .join('\n');
+
+    return {
+        text: `${text.slice(0, lineStart)}${lines}${text.slice(lineEnd)}`,
+        selectionStart: lineStart,
+        selectionEnd: lineStart + lines.length,
+    };
+}
+
+/**
+ * Add a block on lines of its own.
+ */
+export function insertBlock(text: string, position: number, block: string): TextEdit {
+    const before = text.slice(0, position);
+    const lead =
+        before === '' || before.endsWith('\n\n') ? '' : before.endsWith('\n') ? '\n' : '\n\n';
+    const inserted = `${lead}${block}\n`;
+
+    return {
+        text: `${before}${inserted}${text.slice(position)}`,
+        selectionStart: position + inserted.length,
+        selectionEnd: position + inserted.length,
+    };
+}

package/resources/js/core/mask.ts

@@ -0,0 +1,42 @@
+const TOKENS: Record<string, RegExp> = {
+    '9': /\d/,
+    a: /[a-zA-Z]/,
+    '*': /[a-zA-Z0-9]/,
+};
+
+/**
+ * Fit a value to a mask: 9 is a digit, a is a letter, * is either, and anything
+ * else is typed for the user. It stops where the value runs out, so a separator
+ * only appears once something follows it and backspace can remove it.
+ */
+export function applyMask(value: string, mask: string): string {
+    let output = '';
+    let source = 0;
+
+    for (const character of mask) {
+        const token = TOKENS[character];
+
+        if (!token) {
+            if (source >= value.length) {
+                break;
+            }
+
+            output += character;
+            source += value[source] === character ? 1 : 0;
+
+            continue;
+        }
+
+        while (source < value.length && !token.test(value[source])) {
+            source++;
+        }
+
+        if (source >= value.length) {
+            break;
+        }
+
+        output += value[source++];
+    }
+
+    return output;
+}

package/resources/js/core/patch.ts

@@ -20,7 +20,10 @@ export function mergeNode(target: Record<string, any>, patch: Record<string, any
     for (const [key, value] of Object.entries(patch)) {
         const current = target[key];
 
-        if (isNodeList(value) && Array.isArray(current)) {
+        if (key === 'extraAttributes') {
+            // Replaced whole: an attribute the server stopped sending has to go.
+            target[key] = value;
+        } else if (isNodeList(value) && Array.isArray(current)) {
             target[key] = mergeNodeList(current, value);
         } else if (isPlainObject(value) && isPlainObject(current) && !Array.isArray(value)) {
             mergeNode(current, value);
@@ -47,14 +50,14 @@ function mergeNodeList(current: SchemaNode[], incoming: SchemaNode[]): SchemaNod
 }
 
 /**
- * Visit a node and every node below it, including repeater rows (but not templates).
+ * Visit a node and every node below it, including the rows of fields that have them (but not templates).
  */
 export function eachNode(nodes: SchemaNode[], callback: (node: SchemaNode) => void): void {
     for (const node of nodes) {
         callback(node);
         eachNode(node.children ?? [], callback);
 
-        if (node.type === 'repeater' && isPlainObject(node.props?.rows)) {
+        if (node.containsRows && isPlainObject(node.props?.rows)) {
             for (const rowNodes of Object.values(
                 node.props!.rows as Record<string, SchemaNode[]>,
             )) {

package/resources/js/core/paths.ts

@@ -3,6 +3,8 @@ import { isPlainObject } from './values';
 export const ROOT = 'data';
 export const ROW_PLACEHOLDER = '{row}';
 
+const ROW_PLACEHOLDER_PATTERN = /^\{row(:\d+)?\}$/;
+
 /**
  * Read a value by dot path. Paths containing "*" return a flat list,
  * matching Xelqun\Forms\Support\StatePath::get().
@@ -78,8 +80,12 @@ export function deletePath(state: Record<string, any>, path: string): void {
     }
 }
 
+function matchesAnySegment(segment: string): boolean {
+    return segment === '*' || ROW_PLACEHOLDER_PATTERN.test(segment);
+}
+
 /**
- * Whether two paths touch the same state ("*" and "{row}" match any segment).
+ * Whether two paths touch the same state ("*" and row placeholders match any segment).
  */
 export function overlaps(first: string, second: string): boolean {
     const a = first.split('.');
@@ -87,16 +93,7 @@ export function overlaps(first: string, second: string): boolean {
     const length = Math.min(a.length, b.length);
 
     for (let index = 0; index < length; index++) {
-        const left = a[index];
-        const right = b[index];
-
-        if (
-            left !== right &&
-            left !== '*' &&
-            right !== '*' &&
-            left !== ROW_PLACEHOLDER &&
-            right !== ROW_PLACEHOLDER
-        ) {
+        if (a[index] !== b[index] && !matchesAnySegment(a[index]) && !matchesAnySegment(b[index])) {
             return false;
         }
     }
@@ -109,10 +106,10 @@ export function startsWithPath(path: string, prefix: string): boolean {
 }
 
 /**
- * Deep-copy a value and replace every "{row}" placeholder in its strings.
+ * Deep-copy a value and replace one level's row placeholder in its strings.
  */
-export function replaceRow<T>(value: T, rowKey: string): T {
-    return JSON.parse(JSON.stringify(value).split(ROW_PLACEHOLDER).join(rowKey)) as T;
+export function replaceRow<T>(value: T, rowKey: string, placeholder = ROW_PLACEHOLDER): T {
+    return JSON.parse(JSON.stringify(value).split(placeholder).join(rowKey)) as T;
 }
 
 export function clone<T>(value: T): T {