@dynamicforms/vue-forms 0.1.0 → 0.1.2

package/dist/index.d.ts

@@ -1,18 +1,20 @@
 import { ComputedRef } from 'vue';
+import { Reactive } from 'vue';
 
 export declare class AbortEventHandlingException extends Error {
 }
 
 export declare class Action extends FieldBase {
     private readonly _value;
-    constructor(params?: Partial<IField>);
+    protected constructor(params?: Partial<IField<ActionValue>>);
+    static create(params?: Partial<IField<ActionValue>>): Reactive<Action>;
     get value(): ActionValue;
     set value(newValue: ActionValue);
     get icon(): string | undefined;
     set icon(newValue: string | undefined);
     get label(): string | undefined;
     set label(newValue: string | undefined);
-    clone(overrides?: Partial<IField>): Action;
+    clone(overrides?: Partial<IField>): Reactive<Action>;
     execute(params: any): void;
 }
 
@@ -28,6 +30,8 @@ export declare interface ActionValue {
     icon?: string;
 }
 
+export declare const defaultDisplayMode = DisplayMode.FULL;
+
 /**
  * DisplayMode enum provides an enumeration for supported ways of rendering a particular object in the DOM
  */
@@ -66,10 +70,11 @@ export declare class ExecuteAction extends FieldActionBase {
 
 export declare class Field<T = any> extends FieldBase {
     private _value;
-    constructor(params?: Partial<IField<T>>);
+    protected constructor(params?: Partial<IField<T>>);
+    static create<T = any>(params?: Partial<IField<T>>): Reactive<Field<T>>;
     get value(): T;
     set value(newValue: T);
-    clone(overrides?: Partial<IField<T>>): Field<T>;
+    clone(overrides?: Partial<IField<T>>): Reactive<Field<T>>;
 }
 
 export declare abstract class FieldActionBase implements IFieldAction {
@@ -84,6 +89,7 @@ export declare type FieldActionExecute<T = any> = (field: IField<T>, ...params:
 declare abstract class FieldBase<T = any> implements IField<T> {
     abstract get value(): T;
     abstract set value(newValue: T);
+    readonly reactiveValue: ComputedRef<T>;
     abstract clone(overrides?: Partial<IField<T>>): IField<T>;
     originalValue: T;
     valid: boolean;
@@ -102,20 +108,52 @@ declare abstract class FieldBase<T = any> implements IField<T> {
     validate(): void;
     get fullValue(): any;
     get isChanged(): boolean;
-    get reactive(): IField;
     registerAction(action: IFieldAction<T>): this;
     triggerAction<T2 extends IFieldAction<T>>(actionClass: new (...args: any[]) => T2, ...params: any[]): any;
 }
 
+declare namespace Form {
+    export {
+        defaultDisplayMode,
+        ValidationError,
+        ValidationErrorText,
+        FieldActionBase,
+        ActionsMap,
+        EnabledChangedAction,
+        EnabledChangingAction,
+        ExecuteAction,
+        VisibilityChangedAction,
+        VisibilityChangingAction,
+        ValidChangedAction,
+        ValueChangedAction,
+        ListItemAddedAction,
+        ListItemRemovedAction,
+        ActionValue,
+        Action,
+        NullableAction,
+        Field,
+        NullableField,
+        EmptyField,
+        IField,
+        AbortEventHandlingException,
+        FieldActionExecute,
+        IFieldAction,
+        GenericFieldsInterface,
+        Group,
+        NullableGroup,
+        List,
+        NullableList
+    }
+}
+export default Form;
+
 export declare type GenericFieldsInterface = Record<string, IField>;
 
 export declare class Group<T extends GenericFieldsInterface = GenericFieldsInterface> extends FieldBase {
     private readonly _fields;
     private _value;
-    readonly reactiveValue: ComputedRef<Record<string, any> | null>;
     private suppressNotifyValueChanged;
     constructor(fields: T, params?: Partial<IField>);
-    get reactive(): this;
     private static isValidFields;
     static createFromFormData(data: Record<string, any> | null): Group;
     field(fieldName: string): IField | null;
@@ -129,6 +167,7 @@ export declare class Group<T extends GenericFieldsInterface = GenericFieldsInter
 
 export declare interface IField<T = any> {
     value: T;
+    reactiveValue: ComputedRef<T>;
     fullValue: T;
     originalValue: T;
     valid: boolean;
@@ -153,7 +192,6 @@ export declare class List<T extends GenericFieldsInterface = GenericFieldsInterf
     private _itemTemplate?;
     private _previousValue;
     constructor(itemTemplate?: Group<T>, params?: Partial<IField>);
-    get reactive(): this;
     private processSetValueItem;
     private setValue;
     get value(): Record<string, any>[] | null;
@@ -188,11 +226,20 @@ export declare type NullableGroup = Group | null;
 
 export declare type NullableList = List | null;
 
-declare class ValidationError {
+export declare class ValidationError {
     get componentName(): string;
     get componentBindings(): {};
 }
 
+export declare class ValidationErrorText extends ValidationError {
+    text: string;
+    constructor(text: string);
+    get componentName(): string;
+    get componentBindings(): {
+        class: string;
+    };
+}
+
 export declare class ValidChangedAction extends FieldActionBase {
     constructor(executorFn: (field: IField, supr: FieldActionExecute, newValue: boolean, oldValue: boolean) => Promise<void>);
     get classIdentifier(): symbol;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dynamicforms/vue-forms",
   "private": false,
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "description": "Data entry forms for vue - logic (no controls here)",
   "author": "Jure Erznožnik",
@@ -41,11 +41,11 @@
   },
   "issues": "https://github.com/velis74/dynamicforms-vue-forms/issues",
   "peerDependencies": {
-    "lodash": "^4.17.16",
+    "lodash-es": "^4.17.12",
     "vue": "^3.4"
   },
   "devDependencies": {
-    "@types/lodash": "^4.17.16",
+    "@types/lodash-es": "^4.17.12",
     "@vitejs/plugin-vue": "^5",
     "@vitest/coverage-v8": "^3",
     "@vue/test-utils": "^2.2.4",

package/readme.md

@@ -39,10 +39,10 @@ import { Field, Group, ValueChangedAction } from '@dynamicforms/vue-forms';
 
 // Create a form with fields
 const personForm = new Group({
-  firstName: new Field({ value: 'John' }),
-  lastName: new Field({ value: 'Doe' }),
-  age: new Field({ value: 30 }),
-  active: new Field({ value: true })
+  firstName: Field.create({ value: 'John' }),
+  lastName: Field.create({ value: 'Doe' }),
+  age: Field.create({ value: 30 }),
+  active: Field.create({ value: true })
 });
 
 // Access values
@@ -65,7 +65,7 @@ The library provides a powerful event system for field changes and other actions
 ```typescript
 import { Field, Group, ValueChangedAction, ValidationErrorText } from '@dynamicforms/vue-forms';
 
-const emailField = new Field({ value: '' })
+const emailField = Field.create({ value: '' })
   .registerAction(new ValueChangedAction(async (field, supr, newValue, oldValue) => {
     // Custom validation on value change
     if (!newValue.includes('@')) {
@@ -81,7 +81,7 @@ const emailField = new Field({ value: '' })
 // Or register events on a form
 const form = new Group({
   email: emailField,
-  username: new Field()
+  username: Field.create()
 }).registerAction(new ValueChangedAction(async (field, supr, newValue, oldValue) => {
   console.log('Form data changed:', newValue);
   return supr(field, newValue, oldValue);
@@ -107,11 +107,11 @@ interface UserFormData {
 
 // Create the form with type checking
 const userForm = new Group<UserFormData>({
-  username: new Field({ value: '' }),
-  email: new Field({ value: '' }),
+  username: Field.create({ value: '' }),
+  email: Field.create({ value: '' }),
   preferences: new Group({
-    darkMode: new Field({ value: true }),
-    notifications: new Field({ value: true })
+    darkMode: Field.create({ value: true }),
+    notifications: Field.create({ value: true })
   })
 });