@ditojs/admin 3.2.1 → 3.2.2

package/README.md

@@ -28,7 +28,7 @@ For detailed explanation on how things work, checkout the [guide](http://vuejs-t
 
 ## Introduction
 
-An admin of a model consists of two parts, the view and the form. The view represents the model class and has access to the collection routes. The view typically shows a list of model instances with different functionalities like sorting and scopes. The form represents model instances and has access to members of the model. On the form model instances can be edited. The view and the form have in common that they both consist of components.
+An admin of a model consists of two parts, the view and the form. The view represents the model class and has access to the collection routes. The view typically shows a list of model instances with different functionalities like sorting and scopes. The form represents model instances and has access to members of the model. On the data model instances can be edited. The view and the form have in common that they both consist of components.
 
 ## Creating A View
 

package/dist/dito-admin.es.js

@@ -1308,9 +1308,6 @@ var ai = {
 		name() {
 			return this.schema.name;
 		},
-		formModel() {
-			return (this.dialogComponent ?? this.routeComponent).formModel;
-		},
 		type() {
 			return this.schema.type;
 		},
@@ -1398,7 +1395,7 @@ var ai = {
 	},
 	methods: {
 		warnAboutUncomputedValue() {
-			this.schema.compute && !this.formModel.hasComputedValueEntry(this.componentPath) && console.warn(`The value of the component at '${this.componentPath}' isn't computed, as its data isn't part of a form model.`);
+			this.schema.compute && !this.dataModel.hasComputedValueEntry(this.componentPath) && console.warn(`The value of the component at '${this.componentPath}' isn't computed, as its data isn't part of a data model.`);
 		},
 		_register(e) {
 			this.$emit("update:component", e ? this : null), this._registerWithSchemaComponent(e, this.componentPath);
@@ -1617,6 +1614,7 @@ var Di = {
 		"$sourceComponent",
 		"$resourceComponent",
 		"$dialogComponent",
+		"$dataModel",
 		"$panelComponent",
 		"$tabComponent"
 	],
@@ -1635,6 +1633,9 @@ var Di = {
 		};
 	},
 	computed: {
+		dataModel() {
+			return this.$dataModel();
+		},
 		providesData() {
 			return !1;
 		},
@@ -1926,9 +1927,12 @@ var Di = {
 			let r = this.hasListeners(e), i = n?.hasListeners(e);
 			if (r || i) {
 				let a = (n) => n.emit(e, t = G.get(this, t)), o = (e) => i && e !== !1 ? a(n).then(() => e) : e, s = () => r ? a(this).then(o) : o(void 0);
-				return ["load", "change"].includes(e) ? this.$nextTick(s) : s();
+				return ["load", "change"].includes(e) ? this.waitForDataModel().then(s) : s();
 			}
 		},
+		async waitForDataModel() {
+			await this.$nextTick(), await this.dataModel?.waitForPendingLoads();
+		},
 		emitSchemaEvent(e, t) {
 			return this.schemaComponent.emitEvent(e, t);
 		}
@@ -4148,7 +4152,7 @@ function bo(e) {
 	return F(e) || We(e);
 }
 //#endregion
-//#region src/utils/FormModel.js
+//#region src/utils/DataModel.js
 var xo = class {
 	computedValueRecords = /* @__PURE__ */ new Map();
 	optionsRecords = /* @__PURE__ */ new Map();
@@ -4411,7 +4415,8 @@ var Ao = /*#__PURE__*/ X(Y.component("DitoView", {
 	provide() {
 		return {
 			$sourceComponent: () => this.mainComponent?.sourceComponent || null,
-			$resourceComponent: () => this.mainComponent?.resourceComponent || null
+			$resourceComponent: () => this.mainComponent?.resourceComponent || null,
+			$dataModel: () => this.ownDataModel
 		};
 	},
 	data() {
@@ -4421,6 +4426,9 @@ var Ao = /*#__PURE__*/ X(Y.component("DitoView", {
 		};
 	},
 	computed: {
+		dataModel() {
+			return this.ownDataModel;
+		},
 		schema() {
 			return this.meta.schema ?? {};
 		},
@@ -4458,7 +4466,7 @@ var Ao = /*#__PURE__*/ X(Y.component("DitoView", {
 		}
 	} },
 	created() {
-		this.formModel = new xo({
+		this.ownDataModel = new xo({
 			component: this,
 			getSchema: () => this.viewSchema,
 			getData: () => this.data
@@ -4468,7 +4476,7 @@ var Ao = /*#__PURE__*/ X(Y.component("DitoView", {
 		this.shouldRenderSchema(this.viewSchema) || this.$router.replace({ path: "/" });
 	},
 	beforeUnmount() {
-		this.formModel.stop();
+		this.ownDataModel.stop();
 	},
 	methods: {
 		setData(e) {
@@ -4572,7 +4580,10 @@ var Fo = /*#__PURE__*/ X(Y.component("DitoDialog", {
 	components: { UseFocusTrap: Mo },
 	emits: ["remove"],
 	provide() {
-		return { $dialogComponent: () => this };
+		return {
+			$dialogComponent: () => this,
+			$dataModel: () => this.ownDataModel
+		};
 	},
 	props: {
 		components: {
@@ -4605,6 +4616,9 @@ var Fo = /*#__PURE__*/ X(Y.component("DitoDialog", {
 		return { dialogData: e };
 	},
 	computed: {
+		dataModel() {
+			return this.ownDataModel;
+		},
 		dialogComponent() {
 			return this;
 		},
@@ -4635,7 +4649,7 @@ var Fo = /*#__PURE__*/ X(Y.component("DitoDialog", {
 		}
 	},
 	created() {
-		this.formModel = new xo({
+		this.ownDataModel = new xo({
 			component: this,
 			getSchema: () => this.schema,
 			getData: () => this.dialogData
@@ -4647,7 +4661,7 @@ var Fo = /*#__PURE__*/ X(Y.component("DitoDialog", {
 		} });
 	},
 	beforeUnmount() {
-		this.formModel.stop();
+		this.ownDataModel.stop();
 	},
 	methods: {
 		remove() {
@@ -4663,7 +4677,7 @@ var Fo = /*#__PURE__*/ X(Y.component("DitoDialog", {
 			e.target instanceof HTMLInputElement && this.submit();
 		},
 		async submit() {
-			await this.waitForPendingLoadsOf(this.formModel), this.resolve(this.dialogData);
+			await this.waitForPendingLoadsOf(this.dataModel), this.resolve(this.dialogData);
 		},
 		cancel() {
 			this.resolve(void 0);
@@ -7937,6 +7951,9 @@ function Cc(e, t, n, r, i, a) {
 }
 var wc = /*#__PURE__*/ X(Y.component("DitoForm", {
 	mixins: [vo, yc],
+	provide() {
+		return { $dataModel: () => this.ownDataModel };
+	},
 	data() {
 		return {
 			createdData: null,
@@ -7944,6 +7961,9 @@ var wc = /*#__PURE__*/ X(Y.component("DitoForm", {
 		};
 	},
 	computed: {
+		dataModel() {
+			return this.ownDataModel;
+		},
 		isForm() {
 			return !0;
 		},
@@ -7983,7 +8003,7 @@ var wc = /*#__PURE__*/ X(Y.component("DitoForm", {
 			return this.param === "create";
 		},
 		isDirty() {
-			return !this.isMutating && this.formModel.isDirty;
+			return !this.isMutating && this.dataModel.isDirty;
 		},
 		isMutating() {
 			return !!this.sourceSchema.mutate;
@@ -8070,7 +8090,7 @@ var wc = /*#__PURE__*/ X(Y.component("DitoForm", {
 		}
 	},
 	created() {
-		this.formModel = new xo({
+		this.ownDataModel = new xo({
 			component: this,
 			getSchema: () => this.schema,
 			getData: () => this.data,
@@ -8078,7 +8098,7 @@ var wc = /*#__PURE__*/ X(Y.component("DitoForm", {
 		});
 	},
 	beforeUnmount() {
-		this.formModel.stop();
+		this.ownDataModel.stop();
 	},
 	methods: {
 		emitSchemaEvent(e, t) {
@@ -8111,7 +8131,7 @@ var wc = /*#__PURE__*/ X(Y.component("DitoForm", {
 			return this.isTransient ? (this.setSourceData(e), this.sourceItem) : (this.createdData = null, this.loadedData = e, this.data);
 		},
 		applyCleanChanges(e) {
-			return this.formModel.applyCleanChanges(e);
+			return this.dataModel.applyCleanChanges(e);
 		},
 		async cancel() {
 			return this.close();
@@ -8123,7 +8143,7 @@ var wc = /*#__PURE__*/ X(Y.component("DitoForm", {
 			return this.isCreating ? e ? "create" : "created" : e ? "submit" : "submitted";
 		},
 		async submit(e, { validate: t = !0, closeForm: n = !1 } = {}) {
-			if (await this.waitForPendingLoadsOf(this.formModel), t && !this.validateAll()) return !1;
+			if (await this.waitForPendingLoadsOf(this.dataModel), t && !this.validateAll()) return !1;
 			let r = (e) => this.verbs[this.getSubmitVerb(e)], { method: i } = this, a = this.getResource({ method: i }), o = J(e.schema.resource, { parent: a });
 			a = o || a, i = a?.method || i;
 			let s = this.getPayloadData(e, i), c;
@@ -8169,7 +8189,7 @@ var wc = /*#__PURE__*/ X(Y.component("DitoForm", {
 					});
 				}
 			}), c) {
-				if (this.resetValidation(), this.formModel.takeProcessedDataSnapshot().catch(console.error), n || e.closeForm) this.close();
+				if (this.resetValidation(), this.dataModel.takeProcessedDataSnapshot().catch(console.error), n || e.closeForm) this.close();
 				else if (this.isCreating) {
 					let e = this.getItemId(this.schema, this.data);
 					this.$router.replace({
@@ -9222,7 +9242,7 @@ var jl = /*#__PURE__*/ X(Q.register("checkbox", { nativeField: !0 }), [["render"
 			return this.getOptionForValue(this.selectedValue);
 		},
 		optionsResolver() {
-			return this.formModel.getOptionsResolver({
+			return this.dataModel.getOptionsResolver({
 				schema: this.schema,
 				data: this.data,
 				name: this.name,
@@ -9319,7 +9339,7 @@ var jl = /*#__PURE__*/ X(Q.register("checkbox", { nativeField: !0 }), [["render"
 		},
 		replaceValueWithSelectedValue() {
 			let { selectedValue: e } = this;
-			this.formModel.applyCleanChanges(() => {
+			this.dataModel.applyCleanChanges(() => {
 				this.selectedValue = e;
 			}).catch(console.error);
 		},
@@ -10064,7 +10084,7 @@ var iu = {
 			this.setLoadedValue(Ir(this.sourceSchema, e, this.paginationRange));
 		},
 		setLoadedValue(e) {
-			this.formModel.applyCleanChanges(() => {
+			this.dataModel.applyCleanChanges(() => {
 				this.value = e;
 			}).catch(console.error);
 		},
@@ -13541,6 +13561,7 @@ var mp = [
 				$sourceComponent: () => null,
 				$resourceComponent: () => null,
 				$dialogComponent: () => null,
+				$dataModel: () => null,
 				$panelComponent: () => null,
 				$tabComponent: () => null
 			},