@naptics/vue-collection 0.1.4 → 0.1.6

package/components/NCrudModal.d.ts

@@ -97,9 +97,6 @@ export declare const nCrudModalProps: {
     readonly modal: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
     readonly header: PropType<() => JSX.Element>;
     readonly footer: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
-    /**
-     * The color of the remove-button.
-     */
     readonly value: PropType<boolean>;
     readonly onUpdateValue: PropType<(newValue: boolean) => void>;
 };
@@ -205,9 +202,6 @@ declare const _default: import("vue").DefineComponent<{
     readonly modal: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
     readonly header: PropType<() => JSX.Element>;
     readonly footer: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
-    /**
-     * The color of the remove-button.
-     */
     readonly value: PropType<boolean>;
     readonly onUpdateValue: PropType<(newValue: boolean) => void>;
 }, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -307,9 +301,6 @@ declare const _default: import("vue").DefineComponent<{
     readonly modal: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
     readonly header: PropType<() => JSX.Element>;
     readonly footer: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
-    /**
-     * The color of the remove-button.
-     */
     readonly value: PropType<boolean>;
     readonly onUpdateValue: PropType<(newValue: boolean) => void>;
 }>> & {}, {

package/components/NCrudModal.js

@@ -1,6 +1,6 @@
 import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 import { trsl } from '../i18n';
-import { createComponent } from '../utils/component';
+import { createComponentWithSlots } from '../utils/component';
 import { ref } from 'vue';
 import NButton from './NButton';
 import NDialog from './NDialog';
@@ -69,7 +69,7 @@ export const nCrudModalProps = {
  * It has an integrated remove-button with a user-dialog to remove the editing element.
  * When the dialog is accepted `onRemove` is called.
  */
-export default createComponent('NCrudModal', nCrudModalProps, (props, {
+export default createComponentWithSlots('NCrudModal', nCrudModalProps, ['modal', 'footer', 'header'], (props, {
   slots
 }) => {
   const removeDialog = ref();

package/components/NDropdown.js

@@ -1,5 +1,5 @@
 import { isVNode as _isVNode, createVNode as _createVNode } from "vue";
-import { createComponent } from '../utils/component';
+import { createComponentWithSlots } from '../utils/component';
 import { computed, Transition } from 'vue';
 import { RouterLink } from 'vue-router';
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
@@ -42,7 +42,7 @@ export const nDropdownProps = {
  * The `NDropdown` consists of a button and a panel with multiple actions.
  * It is useful to group multiple actions together in one place.
  */
-export default createComponent('NDropdown', nDropdownProps, (props, {
+export default createComponentWithSlots('NDropdown', nDropdownProps, ['button'], (props, {
   slots
 }) => {
   const items = computed(() => {

package/components/NFormModal.js

@@ -1,6 +1,6 @@
 import { createVNode as _createVNode } from "vue";
-import { createComponent } from '../utils/component';
-import { reactive, toRefs } from 'vue';
+import { createComponentWithSlots } from '../utils/component';
+import { computed } from 'vue';
 import NForm from './NForm';
 import NModal, { nModalProps } from './NModal';
 export const nFormModalProps = {
@@ -31,11 +31,11 @@ export const nFormModalProps = {
  * When submitting a `NFormModal` the form is first validated and
  * only if the validation is succesful the `onOk` event is called.
  */
-export default createComponent('NFormModal', nFormModalProps, (props, {
+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 createComponent('NFormModal', nFormModalProps, (props, {
       }
     },
     closeOnOk: false
-  });
-  return () => _createVNode(NModal, childProps, {
+  }));
+  return () => _createVNode(NModal, childProps.value, {
     default: () => [_createVNode(NForm, {
       "form": props.form
     }, {

package/components/NInputSuggestion.d.ts

@@ -22,10 +22,6 @@ export declare const nInputSuggestionProps: {
     readonly input: PropType<(props: import("./NValInput").InputSlotProps) => JSX.Element>;
     readonly optional: BooleanConstructor;
     readonly rules: {
-        /**
-         * `NInputSuggestion` is an input, which shows a list of possible suggestions to the user
-         *  which is filtered while typing. Contrary to {@link NInputSelect} the user is not required to choose any of the suggestions.
-         */
         readonly type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
         readonly default: () => never[];
     };
@@ -97,10 +93,6 @@ declare const _default: import("vue").DefineComponent<{
     readonly input: PropType<(props: import("./NValInput").InputSlotProps) => JSX.Element>;
     readonly optional: BooleanConstructor;
     readonly rules: {
-        /**
-         * `NInputSuggestion` is an input, which shows a list of possible suggestions to the user
-         *  which is filtered while typing. Contrary to {@link NInputSelect} the user is not required to choose any of the suggestions.
-         */
         readonly type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
         readonly default: () => never[];
     };
@@ -167,10 +159,6 @@ declare const _default: import("vue").DefineComponent<{
     readonly input: PropType<(props: import("./NValInput").InputSlotProps) => JSX.Element>;
     readonly optional: BooleanConstructor;
     readonly rules: {
-        /**
-         * `NInputSuggestion` is an input, which shows a list of possible suggestions to the user
-         *  which is filtered while typing. Contrary to {@link NInputSelect} the user is not required to choose any of the suggestions.
-         */
         readonly type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
         readonly default: () => never[];
     };

package/components/NModal.js

@@ -1,5 +1,5 @@
 import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
-import { createComponent } from '../utils/component';
+import { createComponentWithSlots } from '../utils/component';
 import { Dialog, DialogOverlay, DialogTitle, TransitionRoot, TransitionChild } from '@headlessui/vue';
 import NButton from './NButton';
 import NIconButton from './NIconButton';
@@ -112,7 +112,7 @@ export const nModalProps = {
  * The `NModal` is the base component for all modals and dialogs.
  * It provides the core mechanics to display a window in front of everything else.
  */
-export default createComponent('NModal', nModalProps, (props, {
+export default createComponentWithSlots('NModal', nModalProps, ['modal', 'header', 'footer'], (props, {
   slots
 }) => {
   const ok = () => {

package/components/NSearchbarList.d.ts

@@ -18,10 +18,10 @@ export declare const nSearchbarListProps: {
     readonly onUpdateValue: import("vue").PropType<(newValue: string) => void>;
     readonly items: {
         readonly type: import("vue").PropType<import("./NSuggestionList").SuggestionItem[]>;
-        readonly default: () => never[];
-    }; /**
-     * Adds the classes directly to the input (e.g. for shadow).
-     */
+        readonly default: () => never[]; /**
+         * Adds the classes directly to the input (e.g. for shadow).
+         */
+    };
     readonly maxItems: {
         readonly type: NumberConstructor;
         readonly default: () => number;
@@ -55,10 +55,10 @@ declare const _default: import("vue").DefineComponent<{
     readonly onUpdateValue: import("vue").PropType<(newValue: string) => void>;
     readonly items: {
         readonly type: import("vue").PropType<import("./NSuggestionList").SuggestionItem[]>;
-        readonly default: () => never[];
-    }; /**
-     * Adds the classes directly to the input (e.g. for shadow).
-     */
+        readonly default: () => never[]; /**
+         * Adds the classes directly to the input (e.g. for shadow).
+         */
+    };
     readonly maxItems: {
         readonly type: NumberConstructor;
         readonly default: () => number;
@@ -88,10 +88,10 @@ declare const _default: import("vue").DefineComponent<{
     readonly onUpdateValue: import("vue").PropType<(newValue: string) => void>;
     readonly items: {
         readonly type: import("vue").PropType<import("./NSuggestionList").SuggestionItem[]>;
-        readonly default: () => never[];
-    }; /**
-     * Adds the classes directly to the input (e.g. for shadow).
-     */
+        readonly default: () => never[]; /**
+         * Adds the classes directly to the input (e.g. for shadow).
+         */
+    };
     readonly maxItems: {
         readonly type: NumberConstructor;
         readonly default: () => number;

package/components/NSuggestionList.js

@@ -1,6 +1,6 @@
 import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
 import { trsl } from '../i18n';
-import { createComponent } from '../utils/component';
+import { createComponentWithSlots } from '../utils/component';
 import { computed, ref } from 'vue';
 import NLoadingIndicator from './NLoadingIndicator';
 export const nSuggestionListPropsForConfig = {
@@ -72,7 +72,7 @@ export const nSuggestionListProps = {
 /**
  * The `NSuggestionList` can be added to an input and adds a list below it which is shown when the input is focused.
  */
-export default createComponent('NSuggestionList', nSuggestionListProps, props => {
+export default createComponentWithSlots('NSuggestionList', nSuggestionListProps, ['input', 'listItem'], props => {
   const selectedIndex = ref(null);
   const displayItems = computed(() => props.items.slice(0, props.maxItems));
   const isInFocus = ref(false);

package/components/NValInput.js

@@ -1,5 +1,5 @@
 import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
-import { createComponent } from '../utils/component';
+import { createComponentWithSlots } from '../utils/component';
 import { computed } from 'vue';
 import { ref, reactive, watch } from 'vue';
 import NInput, { nInputProps } from './NInput';
@@ -53,7 +53,7 @@ export const nValInputProps = {
 /**
  * The `NValInput` is a `NInput` with custom validation.
  */
-export default createComponent('NValInput', nValInputProps, (props, context) => {
+export default createComponentWithSlots('NValInput', nValInputProps, ['input'], (props, context) => {
   const rules = computed(() => {
     const otherRules = Array.isArray(props.rules) ? props.rules : [props.rules];
     return props.optional ? otherRules : [required, ...otherRules];

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.4",
+    "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.
@@ -63,13 +63,14 @@ export function extractProps(props, ...keys) {
   return reactive(partial);
 }
 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 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;
 }