@vortexm/vjt 0.1.0 → 0.1.2

package/dist/index.js

@@ -3895,6 +3895,18 @@ function stringifyReferenceValue(value) {
   }
   return JSON.stringify(value);
 }
+function isReferenceValueEmpty(value) {
+  if (value === null || value === void 0) {
+    return true;
+  }
+  if (typeof value === "string") {
+    return value.length === 0;
+  }
+  if (Array.isArray(value)) {
+    return value.length === 0;
+  }
+  return false;
+}
 function getCookieValue(name) {
   if (typeof document === "undefined") {
     return void 0;
@@ -3919,16 +3931,27 @@ function getCookieValue(name) {
   }
   return void 0;
 }
-function setCookieValue(name, value) {
+function setCookieValue(name, value, ttlDays) {
   if (typeof document === "undefined") {
     return;
   }
-  document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; path=/`;
+  const ttlValue = typeof ttlDays === "number" && Number.isFinite(ttlDays) ? ttlDays : null;
+  const expires = ttlValue !== null ? `; max-age=${Math.max(0, Math.round(ttlValue * 24 * 60 * 60))}` : "";
+  document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; path=/${expires}`;
+}
+function getUrlParamValue(name) {
+  if (typeof window === "undefined") {
+    return void 0;
+  }
+  return new URLSearchParams(window.location.search).get(name) ?? void 0;
 }
 var ReferenceRuntime = class {
   constructor(host) {
     this.host = host;
   }
+  isEmptyReference(reference, currentValue, responseValue) {
+    return isReferenceValueEmpty(this.resolveReference(reference, currentValue, responseValue));
+  }
   resolveReference(reference, currentValue, responseValue) {
     if (reference === "current") {
       return currentValue;
@@ -3951,6 +3974,9 @@ var ReferenceRuntime = class {
     if (reference.startsWith("app.")) {
       return this.host.getAppValue(reference.slice(4));
     }
+    if (reference.startsWith("url.")) {
+      return getUrlParamValue(reference.slice(4));
+    }
     const [widgetId, ...rest] = reference.split(".");
     const state = this.host.stateById.get(widgetId);
     if (!state) {
@@ -4064,12 +4090,12 @@ var ReferenceRuntime = class {
         return readPath(state, field.split("."));
     }
   }
-  assignReference(reference, inputValue, _currentValue) {
+  assignReference(reference, inputValue, _currentValue, options) {
     if (reference.startsWith("current.")) {
       return;
     }
     if (reference.startsWith("cookies.")) {
-      setCookieValue(reference.slice(8), stringifyReferenceValue(inputValue));
+      setCookieValue(reference.slice(8), stringifyReferenceValue(inputValue), toFiniteNumber(options?.cookieTtl) ?? void 0);
       return;
     }
     if (reference.startsWith("app.")) {
@@ -4251,6 +4277,7 @@ var ActionRuntime = class {
   dispatchWidgetEventImpl;
   executeRequest;
   resolveReference;
+  isEmptyReference;
   assignReference;
   resolveMappedValue;
   setWidgetEnabled;
@@ -4258,6 +4285,7 @@ var ActionRuntime = class {
   setUiReference;
   refreshWidgetTree;
   renderWidgetTree;
+  navigateTo;
   getContextMenuPosition;
   setActiveContextMenu;
   setActiveModalId;
@@ -4273,6 +4301,7 @@ var ActionRuntime = class {
     this.dispatchWidgetEventImpl = options.dispatchWidgetEvent;
     this.executeRequest = options.executeRequest;
     this.resolveReference = options.resolveReference;
+    this.isEmptyReference = options.isEmptyReference;
     this.assignReference = options.assignReference;
     this.resolveMappedValue = options.resolveMappedValue;
     this.setWidgetEnabled = options.setWidgetEnabled;
@@ -4280,6 +4309,7 @@ var ActionRuntime = class {
     this.setUiReference = options.setUiReference;
     this.refreshWidgetTree = options.refreshWidgetTree;
     this.renderWidgetTree = options.renderWidgetTree;
+    this.navigateTo = options.navigateTo;
     this.getContextMenuPosition = options.getContextMenuPosition;
     this.setActiveContextMenu = options.setActiveContextMenu;
     this.setActiveModalId = options.setActiveModalId;
@@ -4289,7 +4319,7 @@ var ActionRuntime = class {
   }
   async dispatchWidgetEvent(node, eventName, key, inputValue = null, pointer = null) {
     try {
-      if ((eventName === "onClick" || eventName === "onUserValueChange") && !this.isWidgetEnabled(node, key)) {
+      if ((eventName === "onClick" || eventName === "onUserValueChange" || eventName === "onEnter" || eventName === "onShiftEnter" || eventName === "onControlEnter") && !this.isWidgetEnabled(node, key)) {
         return;
       }
       const actions = node.events?.[eventName] ?? (eventName === "onClick" ? this.getInlineActions(node) : void 0);
@@ -4365,6 +4395,10 @@ var ActionRuntime = class {
       const requestName = name.slice(8);
       return this.executeRequest(requestName, context.currentValue);
     }
+    if (name.startsWith("navigate ")) {
+      await this.navigateTo(name.slice(9));
+      return null;
+    }
     if (name.startsWith("showMenu ")) {
       const menuId = name.slice(9);
       const menuState = this.stateById.get(menuId);
@@ -4418,8 +4452,12 @@ var ActionRuntime = class {
     if (name.startsWith("equals ")) {
       return this.resolveReference(name.slice(7), context.currentValue, context.responseValue) === action.args;
     }
+    if (name.startsWith("isEmpty ")) {
+      return this.isEmptyReference(name.slice(8), context.currentValue, context.responseValue);
+    }
     if (name.startsWith("set ")) {
-      this.assignReference(name.slice(4), inputValue, context.currentValue);
+      const args = typeof action.args === "object" && action.args !== null && !Array.isArray(action.args) ? action.args : void 0;
+      this.assignReference(name.slice(4), inputValue, context.currentValue, args);
       return inputValue;
     }
     if (name.startsWith("filter ")) {
@@ -5386,6 +5424,31 @@ function renderContextMenuOverlay(env, menu) {
 }
 
 // src/lib/widgets/bindings.ts
+function bindKeyboardSubmitEvents(element, node, key, env) {
+  const hasKeyboardEvents = Boolean(
+    node.events?.onEnter?.length || node.events?.onShiftEnter?.length || node.events?.onControlEnter?.length
+  );
+  if (!hasKeyboardEvents) {
+    return;
+  }
+  element.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter") {
+      return;
+    }
+    let eventName = null;
+    if (event.ctrlKey) {
+      eventName = "onControlEnter";
+    } else if (event.shiftKey) {
+      eventName = "onShiftEnter";
+    } else {
+      eventName = "onEnter";
+    }
+    if (!eventName || !node.events?.[eventName]?.length) {
+      return;
+    }
+    void env.dispatchWidgetEvent(node, eventName, key, env.getActionInputValueForElement(element, node), null);
+  });
+}
 function bindWidgetInputBehavior(root, env) {
   for (const input of Array.from(root.querySelectorAll(".vjt-edit"))) {
     if (!(input instanceof HTMLInputElement)) {
@@ -5453,6 +5516,7 @@ function bindWidgetEvents(root, env) {
       continue;
     }
     if (element instanceof HTMLInputElement && element.dataset.widget === "edit") {
+      bindKeyboardSubmitEvents(element, node, key, env);
       element.addEventListener("input", () => {
         const state = env.stateByKey.get(key);
         if (state) {
@@ -5470,6 +5534,7 @@ function bindWidgetEvents(root, env) {
       continue;
     }
     if (element instanceof HTMLTextAreaElement && element.dataset.widget === "textarea") {
+      bindKeyboardSubmitEvents(element, node, key, env);
       element.addEventListener("input", () => {
         const state = env.stateByKey.get(key);
         if (state) {
@@ -5487,6 +5552,7 @@ function bindWidgetEvents(root, env) {
       continue;
     }
     if (element instanceof HTMLInputElement && element.dataset.widget === "checkbox") {
+      bindKeyboardSubmitEvents(element, node, key, env);
       element.addEventListener("change", () => {
         const state = env.stateByKey.get(key);
         if (state) {
@@ -5504,6 +5570,7 @@ function bindWidgetEvents(root, env) {
       continue;
     }
     if (element instanceof HTMLSelectElement && (element.dataset.widget === "listbox" || element.dataset.widget === "combobox")) {
+      bindKeyboardSubmitEvents(element, node, key, env);
       element.addEventListener("change", () => {
         const state = env.stateByKey.get(key);
         if (state) {
@@ -5521,6 +5588,7 @@ function bindWidgetEvents(root, env) {
       continue;
     }
     if (element instanceof HTMLInputElement && element.dataset.widget === "radio-group") {
+      bindKeyboardSubmitEvents(element, node, key, env);
       element.addEventListener("change", () => {
         const state = env.stateByKey.get(key);
         if (state) {
@@ -5855,6 +5923,7 @@ var RuntimeRenderer = class {
   actionsMap;
   requestsMap;
   sseConfigs;
+  systemEvents;
   resourceManager;
   actionFunctions;
   backendUrl;
@@ -5895,6 +5964,7 @@ var RuntimeRenderer = class {
     this.requestsMap = options.requestsMap ?? this.resourceManager?.getRequestsMap() ?? {};
     const resolvedSseConfigs = options.sseConfigs ?? this.resourceManager?.getSseConfigs() ?? [];
     this.sseConfigs = Array.isArray(resolvedSseConfigs) ? resolvedSseConfigs : resolvedSseConfigs ? [resolvedSseConfigs] : [];
+    this.systemEvents = options.systemEvents ?? this.resourceManager?.getSystemEvents() ?? {};
     this.actionFunctions = options.actionFunctions ?? {};
     this.backendUrl = options.backendUrl;
     this.initialRuntimeSnapshot = options.runtimeSnapshot ? deepClone(options.runtimeSnapshot) : null;
@@ -5910,6 +5980,8 @@ var RuntimeRenderer = class {
             return this.language;
           case "theme":
             return this.theme;
+          case "urlPath":
+            return typeof window === "undefined" ? "" : window.location.pathname;
           default:
             return void 0;
         }
@@ -5923,6 +5995,15 @@ var RuntimeRenderer = class {
             this.theme = typeof value === "boolean" ? value ? "light" : "dark" : value === "light" || value === "dark" ? value : "dark";
             document.documentElement.dataset.vjtTheme = this.theme;
             break;
+          case "urlPath": {
+            if (typeof window === "undefined") {
+              break;
+            }
+            const nextPath = typeof value === "string" && value.trim() ? value.trim() : "/";
+            const normalizedPath = nextPath.startsWith("/") ? nextPath : `/${nextPath}`;
+            window.history.replaceState(window.history.state, "", `${normalizedPath}${window.location.search}${window.location.hash}`);
+            break;
+          }
           default:
             break;
         }
@@ -5948,7 +6029,8 @@ var RuntimeRenderer = class {
       dispatchWidgetEvent: (node, eventName, key, inputValue, pointer) => this.actionRuntime.dispatchWidgetEvent(node, eventName, key, inputValue, pointer),
       executeRequest: (requestName, currentValue) => this.networkRuntime.executeRequest(requestName, currentValue),
       resolveReference: (reference, currentValue, responseValue) => this.referenceRuntime.resolveReference(reference, currentValue, responseValue),
-      assignReference: (reference, inputValue, currentValue) => this.referenceRuntime.assignReference(reference, inputValue, currentValue),
+      isEmptyReference: (reference, currentValue, responseValue) => this.referenceRuntime.isEmptyReference(reference, currentValue, responseValue),
+      assignReference: (reference, inputValue, currentValue, options2) => this.referenceRuntime.assignReference(reference, inputValue, currentValue, options2),
       resolveMappedValue: (template, currentValue, responseValue) => this.referenceRuntime.resolveMappedValue(template, currentValue, responseValue),
       setWidgetEnabled: (widgetId, enabled) => this.setWidgetEnabled(widgetId, enabled),
       clearWidget: (widgetId) => this.clearWidget(widgetId),
@@ -5968,6 +6050,7 @@ var RuntimeRenderer = class {
       },
       refreshWidgetTree: (widgetId) => this.refreshWidgetTree(widgetId),
       renderWidgetTree: (widgetId) => this.renderWidgetTree(widgetId),
+      navigateTo: (url) => this.navigateTo(url),
       getContextMenuPosition: (menuId, pointer) => getContextMenuPosition(menuId, pointer ?? null, this.lastPointer, this.nodeById),
       setActiveContextMenu: (menu) => {
         this.activeContextMenu = menu;
@@ -5996,7 +6079,9 @@ var RuntimeRenderer = class {
     this.afterRender = options.afterRender;
     this.onRuntimeSnapshot = options.onRuntimeSnapshot ?? this.onRuntimeSnapshot;
     const render = async () => {
+      await this.runSystemEvent("onBeforeRender");
       await this.rerenderRoot();
+      await this.runSystemEvent("onAfterRender");
     };
     const renderSync = () => {
       void render().catch((error) => {
@@ -6064,6 +6149,27 @@ var RuntimeRenderer = class {
     }
     return Promise.resolve();
   }
+  async runSystemEvent(eventName) {
+    const actions = this.systemEvents[eventName];
+    if (!actions?.length) {
+      return;
+    }
+    await this.actionRuntime.runActions(actions, null, { currentValue: null });
+  }
+  async navigateTo(url) {
+    if (typeof window === "undefined" || !url.trim()) {
+      return;
+    }
+    const nextUrl = new URL(url, window.location.href);
+    if (nextUrl.origin !== window.location.origin) {
+      window.location.assign(nextUrl.toString());
+      return;
+    }
+    window.history.pushState(window.history.state, "", `${nextUrl.pathname}${nextUrl.search}${nextUrl.hash}`);
+    await this.runSystemEvent("onBeforeNavigate");
+    await this.rerenderRoot();
+    await this.runSystemEvent("onAfterNavigate");
+  }
   reindexStaticTree() {
     this.nodeByKey.clear();
     this.nodeById.clear();
@@ -7026,6 +7132,7 @@ var ResourceManager = class {
   actions = {};
   requests = {};
   sse = {};
+  systemEvents = {};
   i18n = {};
   styles = {};
   constructor(input = {}) {
@@ -7035,6 +7142,7 @@ var ResourceManager = class {
     this.actions = { ...input.actions ?? {} };
     this.requests = { ...input.requests ?? {} };
     this.sse = { ...input.sse ?? {} };
+    this.systemEvents = { ...input.systemEvents ?? {} };
     this.i18n = { ...input.i18n ?? {} };
     this.styles = { ...input.styles ?? {} };
   }
@@ -7053,6 +7161,9 @@ var ResourceManager = class {
   getSseConfigs() {
     return Object.values(this.sse);
   }
+  getSystemEvents() {
+    return this.systemEvents;
+  }
   getI18n() {
     return this.i18n;
   }

package/dist/lib/action-runtime.d.ts

@@ -19,13 +19,17 @@ type ActionRuntimeOptions = {
     } | null) => Promise<void>;
     executeRequest: (requestName: string, currentValue: unknown) => Promise<unknown>;
     resolveReference: (reference: string, currentValue: unknown, responseValue: unknown) => unknown;
-    assignReference: (reference: string, inputValue: unknown, currentValue: unknown) => void;
+    isEmptyReference: (reference: string, currentValue: unknown, responseValue: unknown) => boolean;
+    assignReference: (reference: string, inputValue: unknown, currentValue: unknown, options?: {
+        cookieTtl?: unknown;
+    }) => void;
     resolveMappedValue: (template: unknown, currentValue: unknown, responseValue: unknown) => unknown;
     setWidgetEnabled: (widgetId: string, enabled: boolean) => void;
     clearWidget: (widgetId: string) => void;
     setUiReference: (widgetId: string, resourceRef: string) => void;
     refreshWidgetTree: (widgetId: string) => Promise<void>;
     renderWidgetTree: (widgetId: string) => Promise<void>;
+    navigateTo: (url: string) => Promise<void>;
     getContextMenuPosition: (menuId: string, pointer?: {
         x: number;
         y: number;
@@ -52,6 +56,7 @@ export declare class ActionRuntime {
     private readonly dispatchWidgetEventImpl;
     private readonly executeRequest;
     private readonly resolveReference;
+    private readonly isEmptyReference;
     private readonly assignReference;
     private readonly resolveMappedValue;
     private readonly setWidgetEnabled;
@@ -59,6 +64,7 @@ export declare class ActionRuntime {
     private readonly setUiReference;
     private readonly refreshWidgetTree;
     private readonly renderWidgetTree;
+    private readonly navigateTo;
     private readonly getContextMenuPosition;
     private readonly setActiveContextMenu;
     private readonly setActiveModalId;

package/dist/lib/references.d.ts

@@ -13,10 +13,13 @@ type ReferenceRuntimeHost = {
 export declare class ReferenceRuntime {
     private readonly host;
     constructor(host: ReferenceRuntimeHost);
+    isEmptyReference(reference: string, currentValue: unknown, responseValue: unknown): boolean;
     resolveReference(reference: string, currentValue: unknown, responseValue: unknown): unknown;
     resolveCurrentReference(reference: string, currentValue: unknown): unknown;
     readWidgetField(state: WidgetState, field: string): unknown;
-    assignReference(reference: string, inputValue: unknown, _currentValue: unknown): void;
+    assignReference(reference: string, inputValue: unknown, _currentValue: unknown, options?: {
+        cookieTtl?: unknown;
+    }): void;
     clearListElementState(listKey: string): void;
     resolveMappedValue(template: unknown, currentValue: unknown, responseValue: unknown): unknown;
     isListElementContext(value: unknown): value is ListElementContext;

package/dist/lib/resource-manager.d.ts

@@ -1,9 +1,10 @@
-import type { ActionMap, DescriptionNode, I18nMap, RequestMap, SseConfig, StyleMap } from './types.js';
+import type { ActionMap, DescriptionNode, I18nMap, RequestMap, SseConfig, SystemEventsMap, StyleMap } from './types.js';
 export type ResourceManagerInput = {
     ui?: Record<string, DescriptionNode>;
     actions?: ActionMap;
     requests?: RequestMap;
     sse?: Record<string, SseConfig>;
+    systemEvents?: SystemEventsMap;
     i18n?: I18nMap;
     styles?: StyleMap;
 };
@@ -12,6 +13,7 @@ export declare class ResourceManager {
     private actions;
     private requests;
     private sse;
+    private systemEvents;
     private i18n;
     private styles;
     constructor(input?: ResourceManagerInput);
@@ -20,6 +22,7 @@ export declare class ResourceManager {
     getActionsMap(): ActionMap;
     getRequestsMap(): RequestMap;
     getSseConfigs(): SseConfig[];
+    getSystemEvents(): SystemEventsMap;
     getI18n(): I18nMap;
     getStyleMap(): StyleMap;
 }

package/dist/lib/types.d.ts

@@ -3,7 +3,8 @@ export type LayoutType = 'vertical' | 'horizontal' | 'grid';
 export type TextAlign = 'left' | 'center' | 'right';
 export type VerticalAlign = 'top' | 'center' | 'bottom';
 export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export type WidgetEventName = 'onClick' | 'onUserValueChange' | 'onRefresh';
+export type WidgetEventName = 'onClick' | 'onUserValueChange' | 'onRefresh' | 'onEnter' | 'onShiftEnter' | 'onControlEnter';
+export type SystemEventName = 'onBeforeRender' | 'onAfterRender' | 'onBeforeNavigate' | 'onAfterNavigate';
 export type PrimitiveRequestType = 'int' | 'float' | 'boolean' | 'string';
 export type ActionDefinition = {
     action: string;
@@ -84,6 +85,7 @@ export type I18nMap = Record<string, Record<string, string>>;
 export type ActionMap = Record<string, ActionDefinition[]>;
 export type RequestMap = Record<string, RequestDefinition>;
 export type SseConfigInput = SseConfig | SseConfig[];
+export type SystemEventsMap = Partial<Record<SystemEventName, ActionDefinition[]>>;
 export type WidgetState = {
     key: string;
     widget: DescriptionNode['widget'];
@@ -132,6 +134,7 @@ export type RenderJsonOptions = {
     actionsMap?: ActionMap;
     requestsMap?: RequestMap;
     sseConfigs?: SseConfigInput;
+    systemEvents?: SystemEventsMap;
     actionFunctions?: Record<string, () => unknown>;
     backendUrl?: string;
     resourceManager?: ResourceManager;

package/dist/lib/widgets/bindings.d.ts

@@ -12,7 +12,7 @@ type BindingEnvironment = {
     }) => void;
     updatePointerFromEvent: (event: MouseEvent) => void;
     updateOwningListElementDescriptor: (element: HTMLElement, mutate: (descriptor: DescriptionNode) => void) => void;
-    dispatchWidgetEvent: (node: DescriptionNode, eventName: 'onClick' | 'onUserValueChange', key: string, inputValue?: unknown, pointer?: {
+    dispatchWidgetEvent: (node: DescriptionNode, eventName: 'onClick' | 'onUserValueChange' | 'onEnter' | 'onShiftEnter' | 'onControlEnter', key: string, inputValue?: unknown, pointer?: {
         x: number;
         y: number;
     } | null) => Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vortexm/vjt",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -25,12 +25,12 @@
   "scripts": {
     "build": "npm run build:lib && npm run build:examples && npm run build:types",
     "build:lib": "esbuild src/index.ts --bundle --format=esm --outfile=dist/index.js --loader:.json=json",
-    "build:examples": "esbuild src/examples.ts --bundle --format=esm --outfile=dist/examples.js --loader:.json=json",
+    "build:examples": "esbuild examples/app/examples-app.ts --bundle --format=esm --outfile=dist/examples.js --loader:.json=json",
     "build:types": "tsc -p tsconfig.build.json",
-    "watch": "esbuild src/index.ts src/examples.ts --bundle --format=esm --outdir=dist --loader:.json=json --watch",
+    "watch": "esbuild src/index.ts examples/app/examples-app.ts --bundle --format=esm --outdir=dist --loader:.json=json --watch",
     "typecheck": "tsc -p tsconfig.json",
     "lint": "eslint \"src/**/*.ts\"",
-    "serve": "http-server . -c-1 -p 4173",
+    "serve": "node ./demo/examples-server.mjs",
     "serve:mock-backend": "node ./mock-backend/server.mjs",
     "dev": "concurrently \"npm:watch\" \"npm:serve\" \"npm:serve:mock-backend\"",
     "prepack": "npm run build"

package/vjt-styles.css

@@ -33,6 +33,33 @@ html {
   --vjt-font-heading: Georgia, "Times New Roman", serif;
 }
 
+:root {
+  background: var(--vjt-bg);
+  color: var(--vjt-text);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at top left, var(--vjt-bg-glow), transparent 28%),
+    linear-gradient(180deg, color-mix(in srgb, var(--vjt-bg) 88%, white) 0%, var(--vjt-bg) 100%);
+}
+
+#app {
+  width: 100%;
+  min-height: 100vh;
+}
+
 .vjt-static-text,
 .vjt-md-text,
 .vjt-edit,