@naptics/vue-collection 0.1.3 → 0.1.5

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,5 +1,5 @@
 import { createVNode as _createVNode } from "vue";
-import { createComponent } from '../utils/component';
+import { createComponentWithSlots } from '../utils/component';
 import { reactive, toRefs } from 'vue';
 import NForm from './NForm';
 import NModal, { nModalProps } from './NModal';
@@ -31,7 +31,7 @@ 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({

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/i18n/index.js

@@ -6,7 +6,7 @@ let provider = undefined;
  * @param newProvider
  */
 export function registerTranslationProvider(newProvider) {
-    provider = newProvider;
+  provider = newProvider;
 }
 /**
  * Translates the specified key with the according message.
@@ -15,7 +15,7 @@ export function registerTranslationProvider(newProvider) {
  * @returns the translated message.
  */
 export function trsl(key, params) {
-    return provider?.trsl(key, params) ?? key;
+  return provider?.trsl(key, params) ?? key;
 }
 /**
  * Translates the specified key using pluralization.
@@ -27,5 +27,5 @@ export function trsl(key, params) {
  * @see trsl
  */
 export function trslc(key, count, params) {
-    return provider?.trslc(key, count, params) ?? key;
-}
+  return provider?.trslc(key, count, params) ?? key;
+}

package/index.js

@@ -1,2 +1,2 @@
 import { createComponent, createView } from './utils/component';
-export { createComponent, createView };
+export { createComponent, createView };

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.3",
+    "version": "0.1.5",
     "main": "./index.js",
     "repository": {
         "type": "git",

package/utils/breakpoints.js

@@ -1,10 +1,10 @@
 import { computed, ref } from 'vue';
 export const breakpoints = {
-    sm: 640,
-    md: 768,
-    lg: 1024,
-    xl: 1280,
-    '2xl': 1536,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536
 };
 export const bodyWidth = ref(document.body.clientWidth);
 /**
@@ -12,29 +12,29 @@ export const bodyWidth = ref(document.body.clientWidth);
  * It sets a `window.onresize` listener.
  */
 export function addDocumentResizeEventListener() {
-    window.onresize = () => {
-        bodyWidth.value = document.body.clientWidth;
-    };
+  window.onresize = () => {
+    bodyWidth.value = document.body.clientWidth;
+  };
 }
 /**
  * Returns a ref whose value is `true` as long as the `document.body.clientWitdh` is above the specified breakpoint.
  */
 export function isWidthBreakpoint(breakpoint) {
-    switch (breakpoint) {
-        case 'sm':
-            return isWidthSm;
-        case 'md':
-            return isWidthMd;
-        case 'lg':
-            return isWidthLg;
-        case 'xl':
-            return isWidthXl;
-        case '2xl':
-            return isWidth2xl;
-    }
+  switch (breakpoint) {
+    case 'sm':
+      return isWidthSm;
+    case 'md':
+      return isWidthMd;
+    case 'lg':
+      return isWidthLg;
+    case 'xl':
+      return isWidthXl;
+    case '2xl':
+      return isWidth2xl;
+  }
 }
 export const isWidth2xl = computed(() => bodyWidth.value > breakpoints['2xl']);
 export const isWidthXl = computed(() => bodyWidth.value > breakpoints.xl);
 export const isWidthLg = computed(() => bodyWidth.value > breakpoints.lg);
 export const isWidthMd = computed(() => bodyWidth.value > breakpoints.md);
-export const isWidthSm = computed(() => bodyWidth.value > breakpoints.sm);
+export const isWidthSm = computed(() => bodyWidth.value > breakpoints.sm);

package/utils/component.js

@@ -0,0 +1,75 @@
+import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { defineComponent, reactive, toRef } 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.
+ * All other arguments which the {@link defineComponent} method of vue may provide,
+ * should not be used for a better consistency across all components.
+ * @param name the name of the component, should be more than one word.
+ * @param props the props of the component.
+ * @param setup the setup function, which will be called when the component is mounted.
+ * @returns the created vue-component.
+ */
+export function createComponent(name, props, setup) {
+  return defineComponent({
+    name,
+    props,
+    emits: [],
+    setup
+  });
+}
+/**
+ * When using this function, the created component will make available all props
+ * specifiedin `slotPropKeys` as slot. In this way, they can be used by either setting
+ * the prop directly or by using a slot with the same name. This is useful for older
+ * components (in `.vue` files), because they are dependent on slots.
+ * @see {@link createComponent}
+ */
+export function createComponentWithSlots(name, props, slotPropKeys, setup) {
+  const newSetup = (props, context) => {
+    const slottedProps = createSlotProps(props, context.slots, ...slotPropKeys);
+    return setup(slottedProps, context);
+  };
+  return createComponent(name, props, newSetup);
+}
+/**
+ * Views should be created using this helper function. Views are special components, which don't have props.
+ * They are often the parent objects in a view hierarchy and contain many components.
+ * This function is syntactic sugar to create views and just calls {@link createComponent}.
+ * @param name the name of the component, should be more than one word.
+ * @param setup the setup function, which will be called when the component is mounted.
+ * @returns the created vue-component.
+ */
+export function createView(name, setup) {
+  return defineComponent({
+    name,
+    emits: [],
+    setup: (props, context) => setup(context)
+  });
+}
+/**
+ * Extracts props from another prop object and returns a reactive object with the specified props.
+ * @param props the props to extract from
+ * @param keys the keys to extract from the props
+ * @returns the new object with the specified props
+ * @example
+ * const parentProps = { title: 'hi', text: 'ho' }
+ * const childProps = extractProps(parentProps, 'title')
+ * console.log(childProps) // { title: 'hi' }
+ */
+export function extractProps(props, ...keys) {
+  const partial = {};
+  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;
+  keys.forEach(key => {
+    // if a slot is set once, it is basically always set. The changing content is not a problem.
+    const slot = slots[key];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (slot) newProps[key] = (...args) => _createVNode(_Fragment, null, [slot?.(...args)]);
+  });
+  return newProps;
+}

package/utils/deferred.js

@@ -3,15 +3,15 @@
  * @returns promise, resolve and reject
  */
 export function deferred() {
-    let resolve;
-    let reject;
-    const promise = new Promise((_resolve, _reject) => {
-        resolve = _resolve;
-        reject = _reject;
-    });
-    return {
-        promise,
-        resolve,
-        reject,
-    };
-}
+  let resolve;
+  let reject;
+  const promise = new Promise((_resolve, _reject) => {
+    resolve = _resolve;
+    reject = _reject;
+  });
+  return {
+    promise,
+    resolve,
+    reject
+  };
+}

package/utils/identifiable.js

@@ -6,13 +6,9 @@ import { isNullish } from './utils';
  * @returns The first item with the specified `id` or `undefined` if none exists.
  */
 function find(array, id) {
-    if (isNullish(array))
-        return undefined;
-    const filtered = array.filter(item => item.id === id);
-    if (filtered.length > 0)
-        return filtered[0];
-    else
-        return undefined;
+  if (isNullish(array)) return undefined;
+  const filtered = array.filter(item => item.id === id);
+  if (filtered.length > 0) return filtered[0];else return undefined;
 }
 /**
  * Checks if the given array contains an item with the `id`.
@@ -21,11 +17,11 @@ function find(array, id) {
  * @returns `true` if there is at least one item in the array with the given `id`.
  */
 function contains(array, id) {
-    return find(array, id) !== undefined;
+  return find(array, id) !== undefined;
 }
 function insertSingle(baseArray, insertItem) {
-    const index = baseArray.findIndex(item => item.id === insertItem.id);
-    index === -1 ? baseArray.push(insertItem) : baseArray.splice(index, 1, insertItem);
+  const index = baseArray.findIndex(item => item.id === insertItem.id);
+  index === -1 ? baseArray.push(insertItem) : baseArray.splice(index, 1, insertItem);
 }
 /**
  * Inserts the items into the given array, replacing items with the same `id`.
@@ -36,8 +32,8 @@ function insertSingle(baseArray, insertItem) {
  * @returns The reference to the same array, which was passed.
  */
 function insert(array, ...insertItems) {
-    insertItems.forEach(item => insertSingle(array, item));
-    return array;
+  insertItems.forEach(item => insertSingle(array, item));
+  return array;
 }
 /**
  * Removes all items with the specified `ids` from the given array.
@@ -46,17 +42,14 @@ function insert(array, ...insertItems) {
  * @returns The reference to the same array, which was passed.
  */
 function remove(array, ...ids) {
-    ids.forEach(id => {
-        let noMatches = false;
-        while (!noMatches) {
-            const index = array.findIndex(item => item.id === id);
-            if (index != -1)
-                array.splice(index, 1);
-            else
-                noMatches = true;
-        }
-    });
-    return array;
+  ids.forEach(id => {
+    let noMatches = false;
+    while (!noMatches) {
+      const index = array.findIndex(item => item.id === id);
+      if (index != -1) array.splice(index, 1);else noMatches = true;
+    }
+  });
+  return array;
 }
 /**
  * Compares the two arrays and checks if they both have
@@ -66,15 +59,19 @@ function remove(array, ...ids) {
  * @returns `true` if the arrays contain item with the same `ids` in the same order.
  */
 function areSameArrays(first, second) {
-    if (first.length != second.length)
-        return false;
-    for (let i = 0; i < first.length; i++) {
-        if (first[i]?.id !== second[i]?.id)
-            return false;
-    }
-    return true;
+  if (first.length != second.length) return false;
+  for (let i = 0; i < first.length; i++) {
+    if (first[i]?.id !== second[i]?.id) return false;
+  }
+  return true;
 }
 /**
  * This object contains utility functions to deal with {@link Identifiable} objects.
  */
-export const Id = { find, contains, insert, remove, areSameArrays };
+export const Id = {
+  find,
+  contains,
+  insert,
+  remove,
+  areSameArrays
+};

package/utils/stringMaxLength.js

@@ -5,10 +5,7 @@
  * @see maxLengthSplitCenter
  */
 export function maxLength(input, maxLength) {
-    if (input && input.length > maxLength)
-        return `${input.substring(0, maxLength - 3).trim()}...`;
-    else
-        return input || '';
+  if (input && input.length > maxLength) return `${input.substring(0, maxLength - 3).trim()}...`;else return input || '';
 }
 /**
  * Returns a shortened string with '...' in the center of the string if it is longer than the given `maxLength`.
@@ -17,12 +14,10 @@ export function maxLength(input, maxLength) {
  * @see maxLength
  */
 export function maxLengthSplitCenter(input, maxLength) {
-    if (input && input.length > maxLength) {
-        const chars = maxLength - 3;
-        const charsAtStart = Math.ceil(chars / 2);
-        const charsAtEnd = Math.floor(chars / 2);
-        return `${input.substring(0, charsAtStart).trim()}...${input.substring(input.length - charsAtEnd).trim()}`;
-    }
-    else
-        return input || '';
-}
+  if (input && input.length > maxLength) {
+    const chars = maxLength - 3;
+    const charsAtStart = Math.ceil(chars / 2);
+    const charsAtEnd = Math.floor(chars / 2);
+    return `${input.substring(0, charsAtStart).trim()}...${input.substring(input.length - charsAtEnd).trim()}`;
+  } else return input || '';
+}

package/utils/tailwind.js

@@ -1 +1 @@
-export {};
+export {};

package/utils/utils.js

@@ -7,7 +7,7 @@
  * @returns `true` if the value is anything but `null` or `undefined`.
  */
 export function notNullish(value) {
-    return value !== null && value !== undefined;
+  return value !== null && value !== undefined;
 }
 /**
  * Determines if a value is null or undefined.
@@ -15,7 +15,7 @@ export function notNullish(value) {
  * @returns `true` if the value is `null` or `undefined`.
  */
 export function isNullish(value) {
-    return value === null || value === undefined;
+  return value === null || value === undefined;
 }
 /**
  * Determines if the value of a ref is not nullish.
@@ -24,16 +24,16 @@ export function isNullish(value) {
  * @see notNullish
  */
 export function notNullishRef(ref) {
-    return notNullish(ref.value);
+  return notNullish(ref.value);
 }
 export function isAnyObject(object) {
-    return typeof object === 'object' && !Array.isArray(object);
+  return typeof object === 'object' && !Array.isArray(object);
 }
 /**
  * Returns the same object casted to a {@link ReadonlyObject}.
  */
 export function readonlyObject(object) {
-    return object;
+  return object;
 }
 /*
  * ---------- Unique Id ----------
@@ -43,5 +43,5 @@ let currentId = 1;
  * Generates and returns a non random but unique id.
  */
 export function uniqueId() {
-    return currentId++;
-}
+  return currentId++;
+}

package/utils/vModel.js

@@ -8,54 +8,54 @@
  * @returns An object containing the value-property and the update-function.
  */
 export function vModelProps(propType) {
-    return {
-        /**
-         * The value of the component.
-         */
-        value: propType,
-        /**
-         * This will be called, when the value of the component has changed.
-         */
-        onUpdateValue: Function,
-    };
+  return {
+    /**
+     * The value of the component.
+     */
+    value: propType,
+    /**
+     * This will be called, when the value of the component has changed.
+     */
+    onUpdateValue: Function
+  };
 }
 /**
  * Creates props for a required `v-model` of the given type.
  * @see {@link vModelProps}
  */
 export function vModelRequiredProps(propType) {
-    return {
-        /**
-         * The value of the component.
-         */
-        value: {
-            type: propType,
-            required: true,
-        },
-        /**
-         * This will be called, when the value of the component has changed.
-         */
-        onUpdateValue: Function,
-    };
+  return {
+    /**
+     * The value of the component.
+     */
+    value: {
+      type: propType,
+      required: true
+    },
+    /**
+     * This will be called, when the value of the component has changed.
+     */
+    onUpdateValue: Function
+  };
 }
 /**
  * Creates props for a `v-model` of the given type with a default value.
  * @see {@link vModelProps}
  */
 export function vModelDefaultProps(propType, defaultValue) {
-    return {
-        /**
-         * The value of the component.
-         */
-        value: {
-            type: propType,
-            default: defaultValue,
-        },
-        /**
-         * This will be called, when the value of the component has changed.
-         */
-        onUpdateValue: Function,
-    };
+  return {
+    /**
+     * The value of the component.
+     */
+    value: {
+      type: propType,
+      default: defaultValue
+    },
+    /**
+     * This will be called, when the value of the component has changed.
+     */
+    onUpdateValue: Function
+  };
 }
 /**
  * Uses the given `ref` as a `v-model`, to create a two-way binding with the `ref`.
@@ -63,12 +63,12 @@ export function vModelDefaultProps(propType, defaultValue) {
  * @returns An object of type {@link VModel}, which connects the `ref` to the `v-model`.
  */
 export function vModelForRef(ref) {
-    return {
-        value: ref.value,
-        onUpdateValue: (newValue) => {
-            ref.value = newValue;
-        },
-    };
+  return {
+    value: ref.value,
+    onUpdateValue: newValue => {
+      ref.value = newValue;
+    }
+  };
 }
 /**
  * This creates a `v-model` for a property of an object. The property of the object is taken as the
@@ -93,12 +93,15 @@ export function vModelForRef(ref) {
  * ```
  */
 export function vModelForObjectProperty(object, key, onUpdate) {
-    return {
-        value: object[key],
-        onUpdateValue: (newValue) => {
-            onUpdate?.({ ...object, [key]: newValue });
-        },
-    };
+  return {
+    value: object[key],
+    onUpdateValue: newValue => {
+      onUpdate?.({
+        ...object,
+        [key]: newValue
+      });
+    }
+  };
 }
 /**
  * This creates a `v-model` which operates on one property of a parent `v-model`. It takes the value of
@@ -130,12 +133,15 @@ export function vModelForObjectProperty(object, key, onUpdate) {
  * ```
  */
 export function vModelForVModelProperty(vModel, key) {
-    return {
-        value: vModel.value[key],
-        onUpdateValue: (newValue) => {
-            vModel.onUpdateValue?.({ ...vModel.value, [key]: newValue });
-        },
-    };
+  return {
+    value: vModel.value[key],
+    onUpdateValue: newValue => {
+      vModel.onUpdateValue?.({
+        ...vModel.value,
+        [key]: newValue
+      });
+    }
+  };
 }
 /**
  * This function does the same thing as {@link vModelForVModelProperty},
@@ -168,12 +174,15 @@ export function vModelForVModelProperty(vModel, key) {
  * ```
  */
 export function vModelForVModelPropertyMapType(vModel, key, mapType) {
-    return {
-        value: vModel.value[key],
-        onUpdateValue: (newValue) => {
-            vModel.onUpdateValue?.({ ...vModel.value, [key]: mapType(newValue) });
-        },
-    };
+  return {
+    value: vModel.value[key],
+    onUpdateValue: newValue => {
+      vModel.onUpdateValue?.({
+        ...vModel.value,
+        [key]: mapType(newValue)
+      });
+    }
+  };
 }
 /**
  * Creates an array of `v-models`, one for every element of an array. All changes in
@@ -200,16 +209,16 @@ export function vModelForVModelPropertyMapType(vModel, key, mapType) {
  * ```
  */
 export function vModelsForArray(array, onUpdate) {
-    return array.map((entry, index) => ({
-        value: entry,
-        onUpdateValue: (entry) => {
-            const newArray = [...array];
-            newArray[index] = entry;
-            onUpdate?.(newArray);
-        },
-        remove: () => {
-            const newArray = [...array.slice(0, index), ...array.slice(index + 1)];
-            onUpdate?.(newArray);
-        },
-    }));
-}
+  return array.map((entry, index) => ({
+    value: entry,
+    onUpdateValue: entry => {
+      const newArray = [...array];
+      newArray[index] = entry;
+      onUpdate?.(newArray);
+    },
+    remove: () => {
+      const newArray = [...array.slice(0, index), ...array.slice(index + 1)];
+      onUpdate?.(newArray);
+    }
+  }));
+}

package/utils/validation.js

@@ -3,17 +3,22 @@ import { trsl } from '../i18n';
  * Creates a valid result.
  */
 export function validResult() {
-    return { isValid: true };
+  return {
+    isValid: true
+  };
 }
 /**
  * Creates an invalid result with the provided error message.
  */
 export function invalidResult(errorMessage) {
-    return { isValid: false, errorMessage };
+  return {
+    isValid: false,
+    errorMessage
+  };
 }
 const TRANSLATION_KEY_BASE = 'vue-collection.validation.rules';
 function invalidResultInternal(key, params) {
-    return invalidResult(trsl(`${TRANSLATION_KEY_BASE}.${key}`, params));
+  return invalidResult(trsl(`${TRANSLATION_KEY_BASE}.${key}`, params));
 }
 /**
  * Validates a given input with the specified rules.
@@ -25,12 +30,11 @@ function invalidResultInternal(key, params) {
  * @returns an object containing the result of the validation.
  */
 export function validate(input, rules) {
-    for (const rule of rules) {
-        const validationResult = rule(input);
-        if (!validationResult.isValid)
-            return validationResult;
-    }
-    return validResult();
+  for (const rule of rules) {
+    const validationResult = rule(input);
+    if (!validationResult.isValid) return validationResult;
+  }
+  return validResult();
 }
 /*
  * ---------- Validation Rules ----------
@@ -39,20 +43,14 @@ export function validate(input, rules) {
  * This rule expects the trimmed input-value to be truthy.
  */
 export const required = input => {
-    const trimmed = input?.trim();
-    if (trimmed)
-        return validResult();
-    else
-        return invalidResultInternal('required');
+  const trimmed = input?.trim();
+  if (trimmed) return validResult();else return invalidResultInternal('required');
 };
 /**
  * This rule expects the input to be an integer.
  */
 export const integer = input => {
-    if (!input || Number.isInteger(+input))
-        return validResult();
-    else
-        return invalidResultInternal('integer');
+  if (!input || Number.isInteger(+input)) return validResult();else return invalidResultInternal('integer');
 };
 /**
  * This rule expects the input to be in the specified length range. An empty input
@@ -61,17 +59,18 @@ export const integer = input => {
  * @param max The maximum length of the string.
  */
 export function length(min, max) {
-    return input => {
-        if (!input)
-            return validResult();
-        if (min !== undefined && max !== undefined && !(min <= input.length && input.length <= max))
-            return invalidResultInternal('length.min-max', { min, max });
-        else if (min !== undefined && !(min <= input.length))
-            return invalidResultInternal('length.min', { min });
-        else if (max !== undefined && !(input.length <= max))
-            return invalidResultInternal('length.max', { max });
-        return validResult();
-    };
+  return input => {
+    if (!input) return validResult();
+    if (min !== undefined && max !== undefined && !(min <= input.length && input.length <= max)) return invalidResultInternal('length.min-max', {
+      min,
+      max
+    });else if (min !== undefined && !(min <= input.length)) return invalidResultInternal('length.min', {
+      min
+    });else if (max !== undefined && !(input.length <= max)) return invalidResultInternal('length.max', {
+      max
+    });
+    return validResult();
+  };
 }
 /**
  * This rule expects the input to be a number in the specified range.
@@ -79,50 +78,34 @@ export function length(min, max) {
  * @param max the upper bound, if `undefined` there is no upper bound.
  */
 export function numberRange(min, max) {
-    return input => {
-        if (!input)
-            return validResult();
-        const parsed = Number.parseFloat(input);
-        if (Number.isNaN(parsed))
-            return invalidResultInternal('number-range.nan');
-        if (min !== undefined && max !== undefined && !(min <= parsed && parsed <= max))
-            return invalidResultInternal('number-range.min-max', { min, max });
-        else if (min !== undefined && !(min <= parsed))
-            return invalidResultInternal('number-range.min', { min });
-        else if (max !== undefined && !(parsed <= max))
-            return invalidResultInternal('number-range.max', { max });
-        return validResult();
-    };
+  return input => {
+    if (!input) return validResult();
+    const parsed = Number.parseFloat(input);
+    if (Number.isNaN(parsed)) return invalidResultInternal('number-range.nan');
+    if (min !== undefined && max !== undefined && !(min <= parsed && parsed <= max)) return invalidResultInternal('number-range.min-max', {
+      min,
+      max
+    });else if (min !== undefined && !(min <= parsed)) return invalidResultInternal('number-range.min', {
+      min
+    });else if (max !== undefined && !(parsed <= max)) return invalidResultInternal('number-range.max', {
+      max
+    });
+    return validResult();
+  };
 }
 export const VALIDATION_FORMAT_EMAIL = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/;
 /**
  * This rule expects the input-value to be a valid email adress matching {@link VALIDATION_FORMAT_EMAIL}.
  */
 export const email = input => {
-    if (!input || VALIDATION_FORMAT_EMAIL.test(input))
-        return validResult();
-    else
-        return invalidResultInternal('email');
+  if (!input || VALIDATION_FORMAT_EMAIL.test(input)) return validResult();else return invalidResultInternal('email');
 };
 export const VALIDATION_FORMAT_PASSWORD = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$^+\-=!*()@%&?]).{8,}$/;
 /**
  * This rule expects the input-value to be a password matching {@link VALIDATION_FORMAT_PASSWORD}.
  */
 export const password = input => {
-    if (!input || VALIDATION_FORMAT_PASSWORD.test(input))
-        return validResult();
-    else if (input.length < 8)
-        return invalidResultInternal('password.to-short');
-    else if (!/[a-z]+/.test(input))
-        return invalidResultInternal('password.no-lowercase');
-    else if (!/[A-Z]+/.test(input))
-        return invalidResultInternal('password.no-uppercase');
-    else if (!/\d+/.test(input))
-        return invalidResultInternal('password.no-digits');
-    else if (!/[#$^+\-=!*()@%&?]+/.test(input))
-        return invalidResultInternal('password.no-special-chars');
-    else
-        return invalidResultInternal('password.unknown');
+  if (!input || VALIDATION_FORMAT_PASSWORD.test(input)) return validResult();else if (input.length < 8) return invalidResultInternal('password.to-short');else if (!/[a-z]+/.test(input)) return invalidResultInternal('password.no-lowercase');else if (!/[A-Z]+/.test(input)) return invalidResultInternal('password.no-uppercase');else if (!/\d+/.test(input)) return invalidResultInternal('password.no-digits');else if (!/[#$^+\-=!*()@%&?]+/.test(input)) return invalidResultInternal('password.no-special-chars');else return invalidResultInternal('password.unknown');
 };
 /**
  * This rule expects the input-value to match another (input-) value.
@@ -131,36 +114,27 @@ export const password = input => {
  * @param other the other value to match
  */
 export function matches(other) {
-    return input => {
-        if (input === other)
-            return validResult();
-        else
-            return invalidResultInternal('matches');
-    };
+  return input => {
+    if (input === other) return validResult();else return invalidResultInternal('matches');
+  };
 }
 /**
  * This rule expects the input-value to match one option in an array.
  * @param options the options which the input can match
  */
 export function option(options) {
-    return input => {
-        if (!input || options.includes(input || ''))
-            return validResult();
-        else
-            return invalidResultInternal('option');
-    };
+  return input => {
+    if (!input || options.includes(input || '')) return validResult();else return invalidResultInternal('option');
+  };
 }
 /**
  * This rule expects the input-value to match the regex pattern
  * @param pattern the pattern the input should match.
  */
 export function regex(pattern) {
-    return input => {
-        if (!input || pattern.test(input || ''))
-            return validResult();
-        else
-            return invalidResultInternal('regex');
-    };
+  return input => {
+    if (!input || pattern.test(input || '')) return validResult();else return invalidResultInternal('regex');
+  };
 }
 /**
  * This rule can be used if the validation logic happens somewhere else.
@@ -169,5 +143,5 @@ export function regex(pattern) {
  * Like always, a falsy input is always valid to not interefere with the {@link required} rule.
  */
 export function external(isValid, errorMessage) {
-    return input => (!input || isValid ? validResult() : invalidResult(errorMessage));
-}
+  return input => !input || isValid ? validResult() : invalidResult(errorMessage);
+}

package/utils/vue.js

@@ -5,9 +5,11 @@ import { watch } from 'vue';
  * @param updater the updater funtion which provides the updates
  */
 export function updateWith(ref, updater) {
-    watch(updater, newValue => {
-        ref.value = newValue;
-    }, { immediate: true });
+  watch(updater, newValue => {
+    ref.value = newValue;
+  }, {
+    immediate: true
+  });
 }
 /**
  * Conveience function to create a watcher for a ref
@@ -15,5 +17,5 @@ export function updateWith(ref, updater) {
  * @param onChange the function, which is executed on change of a value
  */
 export function watchRef(ref, onChange) {
-    watch(() => ref.value, onChange);
-}
+  watch(() => ref.value, onChange);
+}