@naptics/vue-collection 0.1.5 → 0.1.7

package/components/NCrudModal.js

@@ -87,21 +87,22 @@ export default createComponentWithSlots('NCrudModal', nCrudModalProps, ['modal',
       cancel
     }) => _createVNode("div", {
       "class": "flex justify-between"
-    }, [_createVNode("div", null, [_createVNode(NButton, {
+    }, [_createVNode("div", null, [!props.hideRemove && _createVNode(NButton, {
       "color": props.removeColor,
       "onClick": remove,
       "disabled": props.removeDisabled
     }, {
       default: () => [props.removeText]
-    })]), _createVNode("div", null, [_createVNode(NButton, {
+    })]), _createVNode("div", {
+      "class": "flex justify-end space-x-2"
+    }, [!props.hideCancel && _createVNode(NButton, {
       "color": props.cancelColor,
       "onClick": cancel
     }, {
       default: () => [props.cancelText]
-    }), _createVNode(NButton, {
+    }), !props.hideOk && _createVNode(NButton, {
       "color": props.okColor,
       "onClick": ok,
-      "class": "ml-2",
       "disabled": props.okDisabled
     }, {
       default: () => [props.okText]

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.7",
     "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;
 }