From 9140195a28c48035569cf9e3dd481416a84fefa4 Mon Sep 17 00:00:00 2001 From: Travis Tidwell Date: Wed, 30 Oct 2024 18:05:00 -0500 Subject: [PATCH 1/2] Expanding the components to allow for more functionality. --- package.json | 2 +- .../embed/src/builder.component.ts | 57 +++++++++++++- .../embed/src/formio.component.ts | 21 ++++-- projects/angular-formio/src/formio.config.ts | 2 +- projects/angular-formio/src/formio.utils.ts | 6 +- yarn.lock | 75 +++++++++---------- 6 files changed, 111 insertions(+), 52 deletions(-) diff --git a/package.json b/package.json index 55055c0b..f955dbb8 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "@angular/router": "^18.1.2", "@compodoc/compodoc": "^1.1.25", "@formio/deprecated-types": "^0.1.0", - "@formio/js": "^5.0.0-rc.59", + "@formio/js": "^5.0.0-rc.96", "@types/jasmine": "^5.1.4", "@types/jasminewd2": "^2.0.13", "@types/node": "^22.0.0", diff --git a/projects/angular-formio/embed/src/builder.component.ts b/projects/angular-formio/embed/src/builder.component.ts index c16a164d..316cd8eb 100644 --- a/projects/angular-formio/embed/src/builder.component.ts +++ b/projects/angular-formio/embed/src/builder.component.ts @@ -1,5 +1,6 @@ import { Component, ElementRef, Input, ViewChild, Output, EventEmitter, AfterViewInit } from '@angular/core'; -import { FormioCore as Formio } from '@formio/js'; +import { FormBuilder } from '@formio/js'; +import WebformBuilder from '@formio/js/lib/cjs/WebformBuilder'; @Component({ selector: 'formio-builder', @@ -9,11 +10,59 @@ export class FormioBuilder implements AfterViewInit { @ViewChild('formio') element: ElementRef; @Input() form?: Object | null; @Input() options?: Object = {}; - @Output() ready = new EventEmitter(); + @Output() change = new EventEmitter(); + @Output() ready = new EventEmitter(); @Output() error = new EventEmitter(); + public builder: FormBuilder; + public componentAdding = false; + get instance(): WebformBuilder { + return this.builder.instance; + } ngAfterViewInit(): void { - Formio.builder(this.element.nativeElement, this.form, this.options).then((builder) => { - this.ready.emit(builder); + this.builder = new FormBuilder(this.element.nativeElement, this.form, this.options); + this.builder.ready.then(() => { + this.instance.on('addComponent', (component, parent, path, index, isNew) => { + if (isNew) { + this.componentAdding = true; + } else { + this.change.emit({ + type: 'addComponent', + builder: this.instance, + form: this.instance.schema, + component: component, + parent: parent, + path: path, + index: index + }); + this.componentAdding = false; + } + }); + this.instance.on('saveComponent', (component, original, parent, path, index, isNew) => { + this.change.emit({ + type: this.componentAdding ? 'addComponent' : 'saveComponent', + builder: this.instance, + form: this.instance.schema, + component: component, + originalComponent: original, + parent: parent, + path: path, + index: index, + isNew: isNew || false + }); + this.componentAdding = false; + }); + this.instance.on('removeComponent', (component, parent, path, index) => { + this.change.emit({ + type: 'deleteComponent', + builder: this.instance, + form: this.instance.schema, + component: component, + parent: parent, + path: path, + index: index + }); + }); + this.ready.emit(this.instance); }).catch((err) => this.error.emit(err)); } } \ No newline at end of file diff --git a/projects/angular-formio/embed/src/formio.component.ts b/projects/angular-formio/embed/src/formio.component.ts index 0983c886..cbc773ca 100644 --- a/projects/angular-formio/embed/src/formio.component.ts +++ b/projects/angular-formio/embed/src/formio.component.ts @@ -1,5 +1,6 @@ import { Component, ViewChild, ElementRef, Input, Output, EventEmitter, OnChanges, AfterViewInit } from '@angular/core'; -import { FormioCore as Formio } from '@formio/js'; +import { FormioCore as Formio, Webform } from '@formio/js'; +import { Form, Submission } from '@formio/core/types' @Component({ selector: 'formio', @@ -7,21 +8,29 @@ import { FormioCore as Formio } from '@formio/js'; }) export class FormioComponent implements AfterViewInit { @Input() src?: string; - @Input() form?: Object | null; - @Input() submission?: Object | null; - @Input() options?: Object = {}; - @Output() ready = new EventEmitter(); + @Input() form?: Form | null; + @Input() submission?: Submission | null; + @Input() url?: string; + @Input() options?: Webform["options"] = {}; + @Output() ready = new EventEmitter(); @Output() submit = new EventEmitter(); @Output() error = new EventEmitter(); + @Output() change = new EventEmitter(); @ViewChild('formio') element: ElementRef; + public instance: Webform; ngAfterViewInit(): void { - Formio.createForm(this.element.nativeElement, this.src || this.form, this.options).then((form) => { + Formio.createForm(this.element.nativeElement, this.src || this.form, this.options).then((form: Webform) => { + this.instance = form; + if (this.url) { + form.url = this.url; + } if (this.submission) { form.submission = this.submission; } this.ready.emit(form); form.on('submit', (submission) => this.submit.emit(submission)); form.on('error', (err) => this.error.emit(err)); + form.on('change', (event) => this.change.emit(event)); }).catch((err) => this.error.emit(err)); } } \ No newline at end of file diff --git a/projects/angular-formio/src/formio.config.ts b/projects/angular-formio/src/formio.config.ts index 66f2f3ee..84238555 100644 --- a/projects/angular-formio/src/formio.config.ts +++ b/projects/angular-formio/src/formio.config.ts @@ -14,7 +14,7 @@ export class FormioAppConfig { apiUrl?: string, baseUrl?: string, appUrl?: string, - projectUrl?: string + projectUrl?: string } = {}) { this.apiUrl = config.apiUrl || config.baseUrl; this.appUrl = config.appUrl || config.projectUrl; diff --git a/projects/angular-formio/src/formio.utils.ts b/projects/angular-formio/src/formio.utils.ts index 0dcc1f04..e55dff92 100644 --- a/projects/angular-formio/src/formio.utils.ts +++ b/projects/angular-formio/src/formio.utils.ts @@ -1,5 +1,5 @@ import { RouterModule } from '@angular/router'; -import { find, trim, each, intersection } from 'lodash'; +import { each } from 'lodash'; export function extendRouter(Class: any, config: any, ClassRoutes: any) { each(Class.decorators, decorator => { @@ -11,7 +11,9 @@ export function extendRouter(Class: any, config: any, ClassRoutes: any) { each(arg.imports, (_import, index) => { if ( (_import.ngModule && (_import.ngModule.name === 'RouterModule')) || - (_import.name === 'RouterModule') + (_import.ngModule && (_import.ngModule.name === '_RouterModule')) || + (_import.name === 'RouterModule') || + (_import.name === '_RouterModule') ) { arg.imports[index] = RouterModule.forChild(ClassRoutes(config)); } diff --git a/yarn.lock b/yarn.lock index 431c1ed9..24810f54 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1938,10 +1938,10 @@ resolved "https://registry.npmjs.org/@foliojs-fork/restructure/-/restructure-2.0.2.tgz#73759aba2aff1da87b7c4554e6839c70d43c92b4" integrity sha512-59SgoZ3EXbkfSX7b63tsou/SDGzwUEK6MuB5sKqgVK1/XE0fxmpsOb9DQI8LXW3KfGnAjImCGhhEb7uPPAUVNA== -"@formio/bootstrap@^3.0.0-rc.25": - version "3.0.0-rc.21-dev.90.e1f0b93" - resolved "https://registry.npmjs.org/@formio/bootstrap/-/bootstrap-3.0.0-rc.21-dev.90.e1f0b93.tgz#fd669cecbf4ab2f58ad91d1a67e55dfbcad1d2b7" - integrity sha512-hNw2XvCU1hzdke42Gos2MnvWbUQjjhLPLPoRAqxEwxzg0lMeR5Xc9wlw1jRhHEwbpvF8c5bBVnnxfX/ilfah4A== +"@formio/bootstrap@3.0.0-rc.41": + version "3.0.0-rc.41" + resolved "https://registry.npmjs.org/@formio/bootstrap/-/bootstrap-3.0.0-rc.41.tgz#460b10ab1f4771df379369909840587de4a7438a" + integrity sha512-jGPxTNHZEnt7c9MO7agx/Ni4K4utcTjK6ePlGX8tPlJzOMbzI45JU3SD12f4i1g9oWIyHSMJoP//soCvrkTTOA== "@formio/choices.js@^10.2.1": version "10.2.1" @@ -1952,20 +1952,20 @@ fuse.js "^6.6.2" redux "^4.2.0" -"@formio/core@^2.1.0-dev.tt.13": - version "2.1.0-rc.3" - resolved "https://registry.npmjs.org/@formio/core/-/core-2.1.0-rc.3.tgz#d2022a66ad7e07e89248899231d406dd179fa812" - integrity sha512-/WMbVo1Gda9cIKSak8gUNk8T+MXcYjJ+hHi4XTrBG28c+oQppHDmh4zm2tnBH5YP3elrpaPa917lVdJXa3iqxw== +"@formio/core@2.3.0-rc.18": + version "2.3.0-rc.18" + resolved "https://registry.npmjs.org/@formio/core/-/core-2.3.0-rc.18.tgz#44f0eaf854d8dc6bbbad1753786f2b13939eac6e" + integrity sha512-inkZLOSpYBiatQa8uJUII+cRk23URlyK4HkS09pHJG/857dxwfn0BIalSc9loTgFawjg6E3UuzCTfjfgUY6MDA== dependencies: - "@types/json-logic-js" "^2.0.5" + "@types/json-logic-js" "^2.0.7" browser-cookies "^1.2.0" - core-js "^3.33.2" - dayjs "^1.11.10" - dompurify "^3.0.6" + core-js "^3.37.1" + dayjs "^1.11.11" + dompurify "^3.1.4" eventemitter3 "^5.0.0" fast-json-patch "^3.1.1" fetch-ponyfill "^7.1.0" - inputmask "^5.0.9-beta.45" + inputmask "5.0.8" json-logic-js "^2.0.2" lodash "^4.17.21" moment "^2.29.4" @@ -1975,15 +1975,15 @@ resolved "https://registry.npmjs.org/@formio/deprecated-types/-/deprecated-types-0.1.0.tgz#e8db67b93a2eded12efd640a10c7ddf0cffa2441" integrity sha512-jNc3Nw55nc75KESg+KPxxdG9ktnERTYodScAx3eh/J2dlA06N2Korafhu9zmwcDis8lOqtEz3X89cVxpJM9MzQ== -"@formio/js@^5.0.0-rc.59": - version "5.0.0-rc.59" - resolved "https://registry.npmjs.org/@formio/js/-/js-5.0.0-rc.59.tgz#88f91b88b1200989e4809e921420552f24a2de16" - integrity sha512-z+x3dDZPA/Bblkyitt+uPiRhY7jSkEwdSrqsg77UajMNZGpnqIefZdBZi9ZknxWQZ5x9S3jIVcLxZWdNb2D1yA== +"@formio/js@^5.0.0-rc.96": + version "5.0.0-rc.96" + resolved "https://registry.npmjs.org/@formio/js/-/js-5.0.0-rc.96.tgz#70994ab5c6a240435f460fc32139ea57b3313683" + integrity sha512-WMHgv13rAqjGX5qntPSHlfv7Ccg/IXM6+jOango6UqHBQCr2mZWprpOTDkfO2MewVvYVwZGgnWO7TfLacfoWZg== dependencies: - "@formio/bootstrap" "^3.0.0-rc.25" + "@formio/bootstrap" "3.0.0-rc.41" "@formio/choices.js" "^10.2.1" - "@formio/core" "^2.1.0-dev.tt.13" - "@formio/text-mask-addons" "^3.8.0-formio.2" + "@formio/core" "2.3.0-rc.18" + "@formio/text-mask-addons" "^3.8.0-formio.3" "@formio/vanilla-text-mask" "^5.1.1-formio.1" abortcontroller-polyfill "^1.7.5" autocompleter "^8.0.4" @@ -2000,7 +2000,6 @@ eventemitter3 "^5.0.1" fast-deep-equal "^3.1.3" fast-json-patch "^3.1.1" - fetch-ponyfill "^7.1.0" idb "^7.1.1" inputmask "^5.0.8" ismobilejs "^1.1.1" @@ -2017,10 +2016,10 @@ uuid "^9.0.0" vanilla-picker "^2.12.3" -"@formio/text-mask-addons@^3.8.0-formio.2": - version "3.8.0-formio.2" - resolved "https://registry.npmjs.org/@formio/text-mask-addons/-/text-mask-addons-3.8.0-formio.2.tgz#b9489e68911c70a31997b97dd846d8a7cca6abdb" - integrity sha512-H4Sm+1Sx59jbrlKxtKbzethhp5OIcP8Oi4JBpsvH/SB8P/KCRmtjKbN5ACqURnXmYtBHLJC6Yr9KZibOVRGxpA== +"@formio/text-mask-addons@^3.8.0-formio.3": + version "3.8.0-formio.3" + resolved "https://registry.npmjs.org/@formio/text-mask-addons/-/text-mask-addons-3.8.0-formio.3.tgz#9da71371a2cb6f781e5e9f90246f25b3d053f75d" + integrity sha512-izNhggJTaCEJNOhtdCkouLxBP3byl+ObsHTdp9RpKwNz0k/ZIy/0xuelk1NY4vAjKojnJPiAjtxn+rrcZnEkpw== "@formio/vanilla-text-mask@^5.1.1-formio.1": version "5.1.1-formio.1" @@ -2795,7 +2794,7 @@ dependencies: "@types/jasmine" "*" -"@types/json-logic-js@^2.0.5": +"@types/json-logic-js@^2.0.7": version "2.0.7" resolved "https://registry.npmjs.org/@types/json-logic-js/-/json-logic-js-2.0.7.tgz#09a70a932d0be937618a9fc791291b069e637fb0" integrity sha512-fucvZmbjqa1+gpw/nIwcP+ZIYHTvmwxuQQFKw/yU7+ZSD63z/xgY5pWN7sYUDRzg2Wf9STapL+7c66FNzhU6+Q== @@ -4128,7 +4127,7 @@ core-js-compat@^3.36.1: dependencies: browserslist "^4.23.0" -core-js@^3.33.2, core-js@^3.37.1: +core-js@^3.37.1: version "3.37.1" resolved "https://registry.npmjs.org/core-js/-/core-js-3.37.1.tgz#d21751ddb756518ac5a00e4d66499df981a62db9" integrity sha512-Xn6qmxrQZyB0FFY8E3bgRXei3lWDJHhvI+u0q9TKIYM49G8pAr0FgnnrFRAmsbptZL1yxRADVXn+x5AGsbBfyw== @@ -4306,10 +4305,10 @@ date-format@^4.0.14: resolved "https://registry.npmjs.org/date-format/-/date-format-4.0.14.tgz#7a8e584434fb169a521c8b7aa481f355810d9400" integrity sha512-39BOQLs9ZjKh0/patS9nrT8wc3ioX3/eA/zgbKNopnF2wCqJEoxywwwElATYvRsXdnOxA/OQeQoFZ3rFjVajhg== -dayjs@^1.11.10: - version "1.11.10" - resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0" - integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ== +dayjs@^1.11.11: + version "1.11.13" + resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c" + integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg== debug@2.6.9: version "2.6.9" @@ -4555,11 +4554,16 @@ domhandler@^5.0.2, domhandler@^5.0.3: dependencies: domelementtype "^2.3.0" -dompurify@^3.0.6, dompurify@^3.1.3: +dompurify@^3.1.3: version "3.1.4" resolved "https://registry.npmjs.org/dompurify/-/dompurify-3.1.4.tgz#42121304b2b3a6bae22f80131ff8a8f3f3c56be2" integrity sha512-2gnshi6OshmuKil8rMZuQCGiUF3cUxHY3NGDzUAdUx/NPEe5DVnO8BDoAQouvgwnx0R/+a6jUn36Z0FSdq8vww== +dompurify@^3.1.4: + version "3.1.6" + resolved "https://registry.npmjs.org/dompurify/-/dompurify-3.1.6.tgz#43c714a94c6a7b8801850f82e756685300a027e2" + integrity sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ== + domutils@^3.0.1: version "3.1.0" resolved "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e" @@ -5921,16 +5925,11 @@ injection-js@^2.4.0: dependencies: tslib "^2.0.0" -inputmask@^5.0.8: +inputmask@5.0.8, inputmask@^5.0.8: version "5.0.8" resolved "https://registry.npmjs.org/inputmask/-/inputmask-5.0.8.tgz#cd0f70b058c3291a0d4f27de25dbfc179c998bb4" integrity sha512-1WcbyudPTXP1B28ozWWyFa6QRIUG4KiLoyR6LFHlpT4OfTzRqFfWgHFadNvRuMN1S9XNVz9CdNvCGjJi+uAMqQ== -inputmask@^5.0.9-beta.45: - version "5.0.9-beta.70" - resolved "https://registry.npmjs.org/inputmask/-/inputmask-5.0.9-beta.70.tgz#86630eb60d0800a47a2b6cabee720d3ba41b654a" - integrity sha512-+8aqRwBxDNDi4zqKPo6te3zH+KWRSO3KA6EpANN5N8tDF3zd44AnbbOUI/g3RslavAaDuqwDMsPZwsxn3zWNMA== - internal-slot@^1.0.7: version "1.0.7" resolved "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802" From 1c47a4434c7837cd9bc9933957d385936f3d5def Mon Sep 17 00:00:00 2001 From: Travis Tidwell Date: Fri, 1 Nov 2024 09:53:39 -0500 Subject: [PATCH 2/2] Updated build. --- package.json | 2 +- projects/angular-formio/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index f955dbb8..a855b7f6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@formio/angular", - "version": "8.0.0-rc.3", + "version": "8.0.0-dev.tt.1", "scripts": { "ng": "ng", "build": "ng build angular-formio", diff --git a/projects/angular-formio/package.json b/projects/angular-formio/package.json index 4ef6a028..f08ff33c 100644 --- a/projects/angular-formio/package.json +++ b/projects/angular-formio/package.json @@ -1,6 +1,6 @@ { "name": "@formio/angular", - "version": "8.0.0-rc.3", + "version": "8.0.0-dev.tt.1", "repository": { "type": "git", "url": "https://github.com/formio/angular-formio"