@naptics/vue-collection 0.1.5 → 0.1.6

package/components/NFormModal.js

@@ -1,6 +1,6 @@
 import { createVNode as _createVNode } from "vue";
 import { createComponentWithSlots } from '../utils/component';
-import { reactive, toRefs } from 'vue';
+import { computed } from 'vue';
 import NForm from './NForm';
 import NModal, { nModalProps } from './NModal';
 export const nFormModalProps = {
@@ -34,8 +34,8 @@ export const nFormModalProps = {
 export default createComponentWithSlots('NFormModal', nFormModalProps, ['modal', 'header', 'footer'], (props, {
   slots
 }) => {
-  const childProps = reactive({
-    ...toRefs(props),
+  const childProps = computed(() => ({
+    ...props,
     onOk: () => {
       if (!props.form || props.form.validate().isValid) {
         props.onOk?.();
@@ -43,8 +43,8 @@ export default createComponentWithSlots('NFormModal', nFormModalProps, ['modal',
       }
     },
     closeOnOk: false
-  });
-  return () => _createVNode(NModal, childProps, {
+  }));
+  return () => _createVNode(NModal, childProps.value, {
     default: () => [_createVNode(NForm, {
       "form": props.form
     }, {

package/package.json

@@ -2,7 +2,7 @@
     "name": "@naptics/vue-collection",
     "author": "Timo Siegenthaler",
     "description": "Vue Collection is a collection of styled and fully functional Vue components which can easily be integrated into our projects.",
-    "version": "0.1.5",
+    "version": "0.1.6",
     "main": "./index.js",
     "repository": {
         "type": "git",

package/utils/component.js

@@ -1,5 +1,5 @@
 import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
-import { defineComponent, reactive, toRef } from 'vue';
+import { defineComponent, reactive, toRef, toRefs, ref } from 'vue';
 /**
  * Components should be created using this helper function.
  * It only takes three arguments, the name and the props of the component and the setup function.
@@ -62,14 +62,15 @@ export function extractProps(props, ...keys) {
   for (const key of keys) partial[key] = toRef(props, key);
   return reactive(partial);
 }
-// operates on same reference of props to not break reactivity
 function createSlotProps(props, slots, ...keys) {
-  const newProps = props;
+  // create refs, don't touch all props which are not slots
+  const newProps = toRefs(props);
   keys.forEach(key => {
-    // if a slot is set once, it is basically always set. The changing content is not a problem.
+    // if a slot is set once, it is basically always set. The changing content is not a problem as it is inside the function.
     const slot = slots[key];
+    // if the slot is set, overwrite the props
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     if (slot) newProps[key] = (...args) => _createVNode(_Fragment, null, [slot?.(...args)]);
   });
-  return newProps;
+  return ref(newProps).value;
 }