@ghentcdh/json-forms-vue 0.7.0 → 0.8.2

package/form-with-actions.component.vue.d.ts

@@ -1,3 +1,4 @@
+import { PropType } from 'vue';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -8,6 +9,10 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: PropType<any>;
+        default: () => {};
+    };
     id: {
         type: StringConstructor;
         required: boolean;
@@ -20,10 +25,10 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         type: StringConstructor;
     };
     schema: {
-        type: import('vue').PropType<any>;
+        type: PropType<any>;
     };
     uiSchema: {
-        type: import('vue').PropType<any>;
+        type: PropType<any>;
     };
     uri: {
         type: StringConstructor;
@@ -36,12 +41,11 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         type: BooleanConstructor;
         default: boolean;
     };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     modelValue: {
-        type: import('vue').PropType<any>;
+        type: PropType<any>;
+        default: () => {};
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: any) => void;
-}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     id: {
         type: StringConstructor;
         required: boolean;
@@ -54,10 +58,10 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         type: StringConstructor;
     };
     schema: {
-        type: import('vue').PropType<any>;
+        type: PropType<any>;
     };
     uiSchema: {
-        type: import('vue').PropType<any>;
+        type: PropType<any>;
     };
     uri: {
         type: StringConstructor;
@@ -70,12 +74,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         type: BooleanConstructor;
         default: boolean;
     };
-    modelValue: {
-        type: import('vue').PropType<any>;
-    };
-}>> & Readonly<{
-    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
-}>, {
+}>> & Readonly<{}>, {
+    modelValue: any;
     scrollable: boolean;
     fullHeight: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;

package/index.js

@@ -128,7 +128,9 @@ const FormWithTableEmits = [
   /** Emitted after a record is successfully deleted. Payload: the deleted record. */
   "delete",
   /** Forwarded form events dispatched by custom renderers inside the modal (e.g. "create"). Payload: `FormEventPayload`. */
-  "events"
+  "events",
+  "custom:edit",
+  "custom:create"
 ];
 const createFormEvents = (dispatch) => ({
   dispatch
@@ -1014,13 +1016,26 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
       store = new FormStore(uri ?? "");
     });
     const hasEdit = ui.hasCustomEventListener("editData");
+    const customEdit = ui.hasCustomEventListener("custom:edit");
+    const customCreate = ui.hasCustomEventListener("custom:create");
     const edit = (data) => {
+      if (customEdit) {
+        emit("custom:edit", data);
+        return;
+      }
       if (hasEdit) {
         emit("editData", data);
         return;
       }
       openModal(data);
     };
+    const create = () => {
+      if (customCreate) {
+        emit("custom:create");
+        return;
+      }
+      openModal();
+    };
     const deleteFn = (data) => {
       ui.ModalService.showConfirm({
         title: "Delete record",
@@ -1063,7 +1078,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
             vue.createVNode(vue.unref(ui.Btn), {
               icon: vue.unref(ui.IconEnum).Plus,
               outline: true,
-              onClick: openModal
+              onClick: create
             }, {
               default: vue.withCtx(() => [..._cache[0] || (_cache[0] = [
                 vue.createTextVNode(" Add new record ", -1)
@@ -8143,22 +8158,34 @@ const _hoisted_1 = { class: "flex justify-end gap-2 p-2 mt-2 border-t border-gra
 const _hoisted_2 = { class: "flex justify-end gap-2" };
 const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
   __name: "form-with-actions.component",
-  props: /* @__PURE__ */ vue.mergeModels(FormWithActionsProperties, {
-    "modelValue": {},
-    "modelModifiers": {}
-  }),
-  emits: /* @__PURE__ */ vue.mergeModels(FormWithActionsEmits, ["update:modelValue"]),
+  props: {
+    ...FormWithActionsProperties,
+    modelValue: { type: Object, default: () => ({}) }
+  },
+  emits: FormWithActionsEmits,
   setup(__props, { emit: __emit }) {
     const properties = __props;
     const emits = __emit;
-    const formData = vue.useModel(__props, "modelValue");
+    const formData = vue.ref(properties.modelValue);
+    const initialFormData = vue.ref(structuredClone(vue.toRaw(properties.modelValue)));
+    const recordId = vue.ref(properties.modelValue?.id ?? null);
     const valid = vue.ref(false);
     const submitted = vue.ref(false);
+    vue.watch(
+      () => properties.modelValue,
+      (newValue, oldValue) => {
+        if (newValue === formData.value) return;
+        recordId.value = newValue?.id ?? null;
+        initialFormData.value = structuredClone(vue.toRaw(newValue));
+        formData.value = newValue;
+      }
+    );
     const store = vue.computed(
       () => properties.uri ? new FormStore(properties.uri) : null
     );
     const updateValue = (data) => {
       formData.value = data;
+      emits("update:modelValue", data);
     };
     const save = () => {
       submitted.value = true;
@@ -8166,7 +8193,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
         return;
       }
       if (store.value) {
-        store.value.save(formData.value.id, formData.value).then(() => {
+        store.value.save(recordId.value, formData.value).then(() => {
           emits("success");
         });
       } else {
@@ -8176,9 +8203,12 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     const clear = () => {
       formData.value = { id: null };
       submitted.value = false;
+      emits("update:modelValue", formData.value);
     };
     const cancel = () => {
+      formData.value = structuredClone(vue.toRaw(initialFormData.value));
       submitted.value = false;
+      emits("update:modelValue", formData.value);
       emits("cancel");
     };
     const onValid = (v) => {
@@ -8188,7 +8218,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     };
     const title = vue.computed(() => {
       if (!properties.updateTitle) return properties.createTitle;
-      return formData.value?.id ? properties.updateTitle : properties.createTitle;
+      return recordId.value ? properties.updateTitle : properties.createTitle;
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(ui.Collapse), {
@@ -8224,26 +8254,25 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
               ]),
               vue.createElementVNode("div", _hoisted_2, [
                 vue.renderSlot(_ctx.$slots, "actions"),
-                !formData.value.id ? (vue.openBlock(), vue.createBlock(vue.unref(ui.Btn), {
+                recordId.value ? (vue.openBlock(), vue.createBlock(vue.unref(ui.Btn), {
                   key: 0,
                   outline: true,
-                  onClick: clear
+                  onClick: cancel
                 }, {
                   default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
-                    vue.createTextVNode(" Clear ", -1)
+                    vue.createTextVNode(" Cancel ", -1)
                   ])]),
                   _: 1
-                })) : vue.createCommentVNode("", true),
-                formData.value.id ? (vue.openBlock(), vue.createBlock(vue.unref(ui.Btn), {
+                })) : (vue.openBlock(), vue.createBlock(vue.unref(ui.Btn), {
                   key: 1,
                   outline: true,
-                  onClick: cancel
+                  onClick: clear
                 }, {
                   default: vue.withCtx(() => [..._cache[4] || (_cache[4] = [
-                    vue.createTextVNode(" Cancel ", -1)
+                    vue.createTextVNode(" Clear ", -1)
                   ])]),
                   _: 1
-                })) : vue.createCommentVNode("", true),
+                })),
                 vue.createVNode(vue.unref(ui.Btn), {
                   color: vue.unref(ui.Color).primary,
                   disabled: submitted.value,

package/index.mjs

@@ -1,7 +1,7 @@
 import { useApi, Debugger } from "@ghentcdh/tools-vue";
 import { NotificationService, Autocomplete, Checkbox, InputNumber, Markdown, MultiSelect, SelectComponent, Input, Textarea, Btn, IconEnum, Collapse, BtnBadge, TextCell, Table, hasCustomEventListener, Card, ModalService, myStyles, Alert, Color, Modal } from "@ghentcdh/ui";
 import { uiTypeIs, rankWith, isNumberControl, isIntegerControl, createDefaultValue, composePaths } from "@jsonforms/core";
-import { inject, provide, ref, computed, defineComponent, openBlock, createBlock, unref, mergeProps, createElementBlock, createElementVNode, normalizeClass, Fragment, renderList, createVNode, createCommentVNode, withCtx, createTextVNode, normalizeStyle, watch, toDisplayString, withModifiers, useModel, renderSlot, mergeModels } from "vue";
+import { inject, provide, ref, computed, defineComponent, openBlock, createBlock, unref, mergeProps, createElementBlock, createElementVNode, normalizeClass, Fragment, renderList, createVNode, createCommentVNode, withCtx, createTextVNode, normalizeStyle, watch, toDisplayString, withModifiers, toRaw, renderSlot, useModel, mergeModels } from "vue";
 import { useJsonFormsControl, rendererProps, useJsonFormsArrayControl, DispatchRenderer, useJsonFormsLayout, JsonForms } from "@jsonforms/vue";
 import axios from "axios";
 import { useVanillaControl, useVanillaArrayControl, vanillaRenderers } from "@jsonforms/vue-vanilla";
@@ -126,7 +126,9 @@ const FormWithTableEmits = [
   /** Emitted after a record is successfully deleted. Payload: the deleted record. */
   "delete",
   /** Forwarded form events dispatched by custom renderers inside the modal (e.g. "create"). Payload: `FormEventPayload`. */
-  "events"
+  "events",
+  "custom:edit",
+  "custom:create"
 ];
 const createFormEvents = (dispatch) => ({
   dispatch
@@ -1012,13 +1014,26 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       store = new FormStore(uri ?? "");
     });
     const hasEdit = hasCustomEventListener("editData");
+    const customEdit = hasCustomEventListener("custom:edit");
+    const customCreate = hasCustomEventListener("custom:create");
     const edit = (data) => {
+      if (customEdit) {
+        emit("custom:edit", data);
+        return;
+      }
       if (hasEdit) {
         emit("editData", data);
         return;
       }
       openModal(data);
     };
+    const create = () => {
+      if (customCreate) {
+        emit("custom:create");
+        return;
+      }
+      openModal();
+    };
     const deleteFn = (data) => {
       ModalService.showConfirm({
         title: "Delete record",
@@ -1061,7 +1076,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             createVNode(unref(Btn), {
               icon: unref(IconEnum).Plus,
               outline: true,
-              onClick: openModal
+              onClick: create
             }, {
               default: withCtx(() => [..._cache[0] || (_cache[0] = [
                 createTextVNode(" Add new record ", -1)
@@ -8141,22 +8156,34 @@ const _hoisted_1 = { class: "flex justify-end gap-2 p-2 mt-2 border-t border-gra
 const _hoisted_2 = { class: "flex justify-end gap-2" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "form-with-actions.component",
-  props: /* @__PURE__ */ mergeModels(FormWithActionsProperties, {
-    "modelValue": {},
-    "modelModifiers": {}
-  }),
-  emits: /* @__PURE__ */ mergeModels(FormWithActionsEmits, ["update:modelValue"]),
+  props: {
+    ...FormWithActionsProperties,
+    modelValue: { type: Object, default: () => ({}) }
+  },
+  emits: FormWithActionsEmits,
   setup(__props, { emit: __emit }) {
     const properties = __props;
     const emits = __emit;
-    const formData = useModel(__props, "modelValue");
+    const formData = ref(properties.modelValue);
+    const initialFormData = ref(structuredClone(toRaw(properties.modelValue)));
+    const recordId = ref(properties.modelValue?.id ?? null);
     const valid = ref(false);
     const submitted = ref(false);
+    watch(
+      () => properties.modelValue,
+      (newValue, oldValue) => {
+        if (newValue === formData.value) return;
+        recordId.value = newValue?.id ?? null;
+        initialFormData.value = structuredClone(toRaw(newValue));
+        formData.value = newValue;
+      }
+    );
     const store = computed(
       () => properties.uri ? new FormStore(properties.uri) : null
     );
     const updateValue = (data) => {
       formData.value = data;
+      emits("update:modelValue", data);
     };
     const save = () => {
       submitted.value = true;
@@ -8164,7 +8191,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         return;
       }
       if (store.value) {
-        store.value.save(formData.value.id, formData.value).then(() => {
+        store.value.save(recordId.value, formData.value).then(() => {
           emits("success");
         });
       } else {
@@ -8174,9 +8201,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const clear = () => {
       formData.value = { id: null };
       submitted.value = false;
+      emits("update:modelValue", formData.value);
     };
     const cancel = () => {
+      formData.value = structuredClone(toRaw(initialFormData.value));
       submitted.value = false;
+      emits("update:modelValue", formData.value);
       emits("cancel");
     };
     const onValid = (v) => {
@@ -8186,7 +8216,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
     const title = computed(() => {
       if (!properties.updateTitle) return properties.createTitle;
-      return formData.value?.id ? properties.updateTitle : properties.createTitle;
+      return recordId.value ? properties.updateTitle : properties.createTitle;
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Collapse), {
@@ -8222,26 +8252,25 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               ]),
               createElementVNode("div", _hoisted_2, [
                 renderSlot(_ctx.$slots, "actions"),
-                !formData.value.id ? (openBlock(), createBlock(unref(Btn), {
+                recordId.value ? (openBlock(), createBlock(unref(Btn), {
                   key: 0,
                   outline: true,
-                  onClick: clear
+                  onClick: cancel
                 }, {
                   default: withCtx(() => [..._cache[3] || (_cache[3] = [
-                    createTextVNode(" Clear ", -1)
+                    createTextVNode(" Cancel ", -1)
                   ])]),
                   _: 1
-                })) : createCommentVNode("", true),
-                formData.value.id ? (openBlock(), createBlock(unref(Btn), {
+                })) : (openBlock(), createBlock(unref(Btn), {
                   key: 1,
                   outline: true,
-                  onClick: cancel
+                  onClick: clear
                 }, {
                   default: withCtx(() => [..._cache[4] || (_cache[4] = [
-                    createTextVNode(" Cancel ", -1)
+                    createTextVNode(" Clear ", -1)
                   ])]),
                   _: 1
-                })) : createCommentVNode("", true),
+                })),
                 createVNode(unref(Btn), {
                   color: unref(Color).primary,
                   disabled: submitted.value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ghentcdh/json-forms-vue",
-  "version": "0.7.0",
+  "version": "0.8.2",
   "main": "./index.js",
   "module": "./index.mjs",
   "types": "./index.d.ts",