@navette-js/cli 1.0.0-beta.3 → 1.0.0-beta.4

package/README.md

@@ -1,6 +1,6 @@
 # @navette-js/cli
 
-Command-line tools for Navette projects: migrations, users, and generators for resources, pages and widgets (npx navette).
+Command-line tools for Navette projects: migrations, users, and generators for resources, pages, widgets and form fields (npx navette).
 
 Part of [Navette](https://github.com/NavetteJS/navette), admin panels for Node.js. Start a project with `npm create navette@latest`, or install the framework with `npm install @navette-js/panels`.
 

package/lib/cli.js

@@ -7,14 +7,14 @@ var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExte
     }
     return path;
 };
-// Project CLI (`npx navette …`): migrations, users, and generators for resources, pages and widgets.
+// Project CLI (`npx navette …`): migrations, users, and generators for resources, pages, widgets and form fields.
 // Run it at the root of a project created with `npm create navette`.
 import { existsSync, mkdirSync, readdirSync, writeFileSync } from 'node:fs';
 import { randomBytes } from 'node:crypto';
 import { join, relative } from 'node:path';
 import { createInterface } from 'node:readline/promises';
 import { pathToFileURL } from 'node:url';
-import { generateResource, generateMigration, generatePage, generateWidget, studly, tableName } from "./generators.js";
+import { generateField, generateResource, generateMigration, generatePage, generateWidget, studly, tableName } from "./generators.js";
 const cwd = process.cwd();
 if (existsSync(join(cwd, '.env')))
     process.loadEnvFile(join(cwd, '.env'));
@@ -132,6 +132,13 @@ const commands = {
             write(join(cwd, 'src', panelOf(), 'pages', `${name}.ts`), generatePage(name));
         },
     },
+    'make:field': {
+        usage: 'navette make:field <Name>                        Create a custom form field (src/fields)',
+        async run() {
+            const name = studly(positional[0] ?? fail('Give the field a name, e.g. RatingInput'));
+            write(join(cwd, 'src', 'fields', `${name}.ts`), generateField(name));
+        },
+    },
     'make:widget': {
         usage: 'navette make:widget <Name> [--panel=admin] [--type=stats|chart|table]   Create a dashboard widget',
         async run() {

package/lib/generators.d.ts

@@ -15,3 +15,5 @@ export declare function generateResource(model: string, table: string, columns:
 export declare function generateMigration(name: string): string;
 export declare function generatePage(name: string): string;
 export declare function generateWidget(name: string, type: 'stats' | 'chart' | 'table'): string;
+/** A custom form field: an Alpine.js control entangled with the field's state, validated on the server. */
+export declare function generateField(name: string): string;

package/lib/generators.js

@@ -175,3 +175,39 @@ export class ${name} extends StatsOverviewWidget {
 }
 `;
 }
+/** A custom form field: an Alpine.js control entangled with the field's state, validated on the server. */
+export function generateField(name) {
+    return `import { Field, type Rule } from '@navette-js/forms';
+import { configured, e, js } from '@navette-js/support';
+
+/**
+ * ${headline(snake(name))} field. Use it like any field: \`${name}.make('name').required()\`.
+ * The state comes from the browser: check its shape in getValidationRules() before it is saved.
+ */
+export class ${name} extends Field {
+    static make(name: string): ${name} {
+        return configured(new ${name}(name));
+    }
+
+    async getValidationRules(): Promise<Rule[]> {
+        return [
+            ...(await super.getValidationRules()),
+            { name: 'string', passes: (value) => typeof value === 'string', message: (attribute) => \`The \${attribute} field must be a string.\` },
+        ];
+    }
+
+    async toHtml(): Promise<string> {
+        const id = this.getId();
+        const disabled = await this.isDisabled();
+
+        return this.wrap(
+            \`<div class="fi-input-wrp\${this.hasError() ? ' fi-invalid' : ''}" x-data="{ state: $wire.$entangle(\${e(js(this.getStatePath()))}) }">
+                <div class="fi-input-wrp-content-ctn">
+                    <input id="\${e(id)}" type="text" class="fi-input" x-model="state"\${disabled ? ' disabled' : ''}\${this.hasError() ? \` aria-invalid="true" aria-describedby="\${e(id)}-error"\` : ''} />
+                </div>
+            </div>\`,
+        );
+    }
+}
+`;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@navette-js/cli",
-  "version": "1.0.0-beta.3",
-  "description": "Command-line tools for Navette projects: migrations, users, and generators for resources, pages and widgets (npx navette).",
+  "version": "1.0.0-beta.4",
+  "description": "Command-line tools for Navette projects: migrations, users, and generators for resources, pages, widgets and form fields (npx navette).",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -42,8 +42,8 @@
     "scaffold"
   ],
   "dependencies": {
-    "@navette-js/panels": "1.0.0-beta.3",
-    "@navette-js/database": "1.0.0-beta.3"
+    "@navette-js/panels": "1.0.0-beta.4",
+    "@navette-js/database": "1.0.0-beta.4"
   },
   "publishConfig": {
     "access": "public",