@decaf-ts/ui-decorators 0.4.5 → 0.4.6

package/lib/ui/decorators.cjs

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hideOn = hideOn;
+exports.hidden = hidden;
+exports.uielement = uielement;
+exports.uiprop = uiprop;
+require("reflect-metadata");
+const constants_1 = require("./constants.cjs");
+const decorator_validation_1 = require("@decaf-ts/decorator-validation");
+const Rendering_1 = require("./Rendering.cjs");
+const db_decorators_1 = require("@decaf-ts/db-decorators");
+/**
+ * @namespace ui-decorators.ui.decorators
+ * @memberOf ui-decorators.ui
+ */
+function hideOn(...operations) {
+    return (0, decorator_validation_1.propMetadata)(Rendering_1.RenderingEngine.key(constants_1.UIKeys.HIDDEN), operations);
+}
+function hidden() {
+    return hideOn(db_decorators_1.OperationKeys.CREATE, db_decorators_1.OperationKeys.READ, db_decorators_1.OperationKeys.UPDATE, db_decorators_1.OperationKeys.DELETE);
+}
+/**
+ * Adds the UIElement definition as metadata to the property, allowing it to be read by any {@link RenderStrategy}
+ *
+ * @param {string} tag The component/HTML element tag name
+ * @param {{}} [props] The properties to pass to that component/HTML Element
+ * @param serialize
+ *
+ * @decorator uielement
+ *
+ * @category Decorators
+ * @subcategory ui-decorators
+ */
+function uielement(tag, props, serialize = false) {
+    return (original, propertyKey) => {
+        const metadata = {
+            tag: tag,
+            serialize: serialize,
+            props: Object.assign({
+                name: propertyKey,
+            }, props || {}),
+        };
+        return (0, decorator_validation_1.propMetadata)(Rendering_1.RenderingEngine.key(constants_1.UIKeys.ELEMENT), metadata)(original, propertyKey);
+    };
+}
+/**
+ * Adds the UIProp definition as metadata to the property, allowing it to be read by any {@link RenderStrategy}
+ *
+ * this requires a '@uimodel' with a defined tag
+ *
+ * @param {string} [propName] the property name that will be passed to the component. defaults to the PropertyKey
+ *
+ * @decorator uiprop
+ *
+ * @category Decorators
+ * @subcategory ui-decorators
+ */
+function uiprop(propName = undefined, stringify = false) {
+    return (target, propertyKey) => {
+        const metadata = {
+            name: propName || propertyKey,
+            stringify: stringify,
+        };
+        (0, decorator_validation_1.propMetadata)(Rendering_1.RenderingEngine.key(constants_1.UIKeys.PROP), metadata)(target, propertyKey);
+    };
+}

package/lib/ui/decorators.d.ts

@@ -0,0 +1,34 @@
+import "reflect-metadata";
+import { CrudOperationKeys } from "./types";
+/**
+ * @namespace ui-decorators.ui.decorators
+ * @memberOf ui-decorators.ui
+ */
+export declare function hideOn(...operations: CrudOperationKeys[]): (target: object, propertyKey?: string | symbol | unknown, descriptor?: PropertyDescriptor) => void;
+export declare function hidden(): (target: object, propertyKey?: string | symbol | unknown, descriptor?: PropertyDescriptor) => void;
+/**
+ * Adds the UIElement definition as metadata to the property, allowing it to be read by any {@link RenderStrategy}
+ *
+ * @param {string} tag The component/HTML element tag name
+ * @param {{}} [props] The properties to pass to that component/HTML Element
+ * @param serialize
+ *
+ * @decorator uielement
+ *
+ * @category Decorators
+ * @subcategory ui-decorators
+ */
+export declare function uielement(tag: string, props?: Record<string, any>, serialize?: boolean): (original: any, propertyKey?: any) => void;
+/**
+ * Adds the UIProp definition as metadata to the property, allowing it to be read by any {@link RenderStrategy}
+ *
+ * this requires a '@uimodel' with a defined tag
+ *
+ * @param {string} [propName] the property name that will be passed to the component. defaults to the PropertyKey
+ *
+ * @decorator uiprop
+ *
+ * @category Decorators
+ * @subcategory ui-decorators
+ */
+export declare function uiprop(propName?: string | undefined, stringify?: boolean): (target: any, propertyKey: string) => void;

package/lib/ui/errors.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderingError = void 0;
+const db_decorators_1 = require("@decaf-ts/db-decorators");
+class RenderingError extends db_decorators_1.BaseError {
+    constructor(msg) {
+        super(RenderingError.name, msg);
+    }
+}
+exports.RenderingError = RenderingError;

package/lib/ui/errors.d.ts

@@ -0,0 +1,4 @@
+import { BaseError } from "@decaf-ts/db-decorators";
+export declare class RenderingError extends BaseError {
+    constructor(msg: string | Error);
+}

package/lib/ui/index.cjs

@@ -0,0 +1,27 @@
+"use strict";
+/**
+ * @namespace ui-decorators.ui
+ * @memberOf ui-decorators
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./constants.cjs"), exports);
+__exportStar(require("./decorators.cjs"), exports);
+__exportStar(require("./errors.cjs"), exports);
+__exportStar(require("./interfaces.cjs"), exports);
+__exportStar(require("./Rendering.cjs"), exports);
+__exportStar(require("./types.cjs"), exports);
+__exportStar(require("./utils.cjs"), exports);

package/lib/ui/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @namespace ui-decorators.ui
+ * @memberOf ui-decorators
+ */
+export * from "./constants";
+export * from "./decorators";
+export * from "./errors";
+export * from "./interfaces";
+export * from "./Rendering";
+export * from "./types";
+export * from "./utils";

package/lib/ui/interfaces.cjs

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ui/interfaces.d.ts

@@ -0,0 +1,5 @@
+import { FieldProperties } from "./types";
+import { CrudOperations } from "@decaf-ts/db-decorators";
+export interface CrudFormField extends FieldProperties {
+    operation: CrudOperations;
+}

package/lib/ui/types.cjs

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ui/types.d.ts

@@ -0,0 +1,46 @@
+import { OperationKeys } from "@decaf-ts/db-decorators";
+export interface FieldDefinition<T = void> {
+    tag: string;
+    rendererId?: string;
+    props: T & FieldProperties;
+    children?: FieldDefinition<T>[];
+}
+export interface FieldProperties {
+    name: string;
+    type: string;
+    value: string | number | Date;
+    hidden?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    maxLength?: number;
+    minLength?: number;
+    max?: number | Date;
+    min?: number | Date;
+    pattern?: string;
+    step?: number;
+    format?: string;
+}
+/**
+ * @typedef UIElementMetadata
+ * @memberOf ui-decorators.ui.decorators
+ */
+export type UIElementMetadata = {
+    tag: string;
+    props?: Record<string, any>;
+    serialize?: boolean;
+};
+/**
+ * @typedef UIElementMetadata
+ * @memberOf ui-decorators.ui.decorators
+ */
+export type UIModelMetadata = Omit<UIElementMetadata, "serialize">;
+/**
+ * @typedef UIPropMetadata
+ * @memberOf ui-decorators.ui.decorators
+ */
+export type UIPropMetadata = {
+    name: string;
+    stringify: boolean;
+};
+export type CrudOperationKeys = OperationKeys.CREATE | OperationKeys.READ | OperationKeys.UPDATE | OperationKeys.DELETE;

package/lib/ui/utils.cjs

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatByType = formatByType;
+exports.parseValueByType = parseValueByType;
+exports.parseToNumber = parseToNumber;
+exports.escapeHtml = escapeHtml;
+exports.revertHtml = revertHtml;
+exports.generateUIModelID = generateUIModelID;
+const decorator_validation_1 = require("@decaf-ts/decorator-validation");
+const constants_1 = require("./constants.cjs");
+const db_decorators_1 = require("@decaf-ts/db-decorators");
+/**
+ * @function formatByType
+ *
+ * @memberOf ui-decorators-web.ui
+ */
+function formatByType(type, value, ...args) {
+    if (type === constants_1.UIKeys.DATE) {
+        const format = args.shift() || constants_1.HTML5DateFormat;
+        return (0, decorator_validation_1.formatDate)(new Date(value), format);
+    }
+    return value;
+}
+function parseValueByType(type, value, fieldProps) {
+    let result = undefined;
+    switch (type) {
+        case constants_1.HTML5InputTypes.NUMBER:
+            result = parseToNumber(value);
+            break;
+        case constants_1.HTML5InputTypes.DATE: {
+            const format = fieldProps.format;
+            result =
+                typeof value === decorator_validation_1.ReservedModels.NUMBER
+                    ? new Date(value)
+                    : value
+                        ? format
+                            ? (0, decorator_validation_1.parseDate)(format, value)
+                            : new Date(value)
+                        : undefined;
+            break;
+        }
+        default:
+            result =
+                typeof value === decorator_validation_1.ReservedModels.STRING
+                    ? escapeHtml(value)
+                    : result;
+    }
+    if (typeof result === "undefined") {
+        throw new db_decorators_1.InternalError(`Failed to parse value of type ${type} from ${typeof value} - ${value}`);
+    }
+    return result;
+}
+function parseToNumber(value) {
+    if (typeof value === "number" && !isNaN(value))
+        return value;
+    const parsed = Number(value);
+    if (!isNaN(parsed))
+        return parsed;
+    return undefined;
+}
+function escapeHtml(value) {
+    if (!value)
+        return undefined;
+    const tagsToReplace = {
+        "&": "&",
+        "<": "&lt;",
+        ">": "&gt;",
+    };
+    return `${value}`.replace(/[&<>]/g, (tag) => {
+        return tagsToReplace[tag] || tag;
+    });
+}
+function revertHtml(value) {
+    const tagsToReplace = {
+        "&amp;": "&",
+        "&lt;": "<",
+        "&gt;": ">",
+    };
+    return `${value}`.replace(/&lt;|&gt;|&amp;/g, (tag) => {
+        return tagsToReplace[tag] || tag;
+    });
+}
+function generateUIModelID(model) {
+    let id;
+    try {
+        id = (0, db_decorators_1.findModelId)(model);
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    }
+    catch (e) {
+        id = Date.now();
+    }
+    const name = model.constructor.name;
+    return `${name}-${id}`;
+}

package/lib/ui/utils.d.ts

@@ -0,0 +1,13 @@
+import { Model } from "@decaf-ts/decorator-validation";
+import { FieldProperties } from "./types";
+/**
+ * @function formatByType
+ *
+ * @memberOf ui-decorators-web.ui
+ */
+export declare function formatByType(type: any, value: any, ...args: unknown[]): string | number;
+export declare function parseValueByType(type: string, value: string | number, fieldProps: FieldProperties): string | number | Date;
+export declare function parseToNumber(value: string | number): number | undefined;
+export declare function escapeHtml(value: string): string | undefined;
+export declare function revertHtml(value: string): string;
+export declare function generateUIModelID<M extends Model>(model: M): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decaf-ts/ui-decorators",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "Extension of decorator validation to ui elements to allow for web integration",
   "type": "module",
   "exports": {