@naptics/vue-collection 0.0.2 → 0.0.4

package/i18n/index.js

@@ -1,14 +1,13 @@
-import en from './en';
-import de from './de';
-import { createI18n } from 'vue-i18n';
-const i18n = createI18n({
-    legacy: false,
-    locale: 'en',
-    messages: {
-        en,
-        de,
-    },
-});
+let provider = undefined;
+/**
+ * Registeres a new translation provider for vue-collection.
+ * The translation provider should contain all vue-collection
+ * texts located under `i18n/<lang>/vue-collection.json`.
+ * @param newProvider
+ */
+export function registerTranslationProvider(newProvider) {
+  provider = newProvider;
+}
 /**
  * Translates the specified key with the according message.
  * @param key the key to translate.
@@ -16,7 +15,7 @@ const i18n = createI18n({
  * @returns the translated message.
  */
 export function trsl(key, params) {
-    return i18n.global.t(key, params == null ? {} : params);
+  return provider?.trsl(key, params) ?? key;
 }
 /**
  * Translates the specified key using pluralization.
@@ -28,7 +27,5 @@ export function trsl(key, params) {
  * @see trsl
  */
 export function trslc(key, count, params) {
-    const newCount = count ?? 0;
-    const newParams = { n: newCount, ...params };
-    return i18n.global.t(key, newParams, { plural: newCount });
-}
+  return provider?.trslc(key, count, params) ?? key;
+}

package/index.d.ts

@@ -62,3 +62,5 @@ import NValInput from './components/NValInput';
 export { NValInput };
 import { type ValidatedForm, createValidatedForm } from './components/ValidatedForm';
 export { ValidatedForm, createValidatedForm };
+import { createComponent, createView, createProps } from './utils/component';
+export { createComponent, createView, createProps };

package/index.js

@@ -63,3 +63,5 @@ import NValInput from './components/NValInput';
 export { NValInput };
 import { createValidatedForm } from './components/ValidatedForm';
 export { createValidatedForm };
+import { createComponent, createView, createProps } from './utils/component';
+export { createComponent, createView, createProps };

package/package.json

@@ -1,7 +1,11 @@
 {
     "name": "@naptics/vue-collection",
-    "version": "0.0.2",
+    "version": "0.0.4",
     "main": "./index.js",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/naptics/vue-collection"
+    },
     "scripts": {
         "dev": "vite",
         "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
@@ -12,7 +16,7 @@
         "build-demo": "run-p type-check-demo build-only-demo",
         "build-lib": "run-p type-check-lib build-only-lib",
         "build-only-demo": "vite build",
-        "build-only-lib": "rm -rf ./lib && tsc --project tsconfig.lib.json && mv ./lib/src/lib/* ./lib && rm -rf ./lib/src && rm ./lib/tsconfig.lib.tsbuildinfo && cp ./src/lib/components/*.css ./lib/components"
+        "build-only-lib": "bash ./scripts/build-lib.sh"
     },
     "dependencies": {
         "@headlessui/vue": "^1.7.10",
@@ -21,10 +25,11 @@
     },
     "peerDependencies": {
         "@heroicons/vue": "^2.0.16",
-        "vue": "^3.2.36",
-        "vue-i18n": "^9.2.2"
+        "vue": "^3.2.36"
     },
     "devDependencies": {
+        "@babel/cli": "^7.21.0",
+        "@babel/core": "^7.21.3",
         "@intlify/unplugin-vue-i18n": "^0.8.2",
         "@rushstack/eslint-patch": "^1.2.0",
         "@tailwindcss/forms": "^0.5.3",
@@ -32,6 +37,7 @@
         "@types/node": "^18.14.0",
         "@vitejs/plugin-vue": "^4.0.0",
         "@vitejs/plugin-vue-jsx": "^3.0.0",
+        "@vue/babel-plugin-jsx": "^1.1.1",
         "@vue/eslint-config-prettier": "^7.1.0",
         "@vue/eslint-config-typescript": "^11.0.2",
         "@vue/test-utils": "^2.3.0",
@@ -47,6 +53,7 @@
         "typescript": "^4.9.5",
         "vite": "^4.1.3",
         "vitest": "^0.28.5",
+        "vue-i18n": "^9.2.2",
         "vue-router": "^4.1.6",
         "vue-tsc": "^1.1.5"
     }

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,26 +12,26 @@ 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;
+  };
 }
 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

@@ -1,4 +1,4 @@
-import { defineComponent, reactive, toRef, } 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.
@@ -10,7 +10,12 @@ import { defineComponent, reactive, toRef, } from 'vue';
  * @returns the created vue-component.
  */
 export function createComponent(name, props, setup) {
-    return defineComponent({ name, props, emits: [], setup });
+  return defineComponent({
+    name,
+    props,
+    emits: [],
+    setup
+  });
 }
 /**
  * Views should be created using this helper function. Views are special components, which don't have props.
@@ -21,7 +26,11 @@ export function createComponent(name, props, setup) {
  * @returns the created vue-component.
  */
 export function createView(name, setup) {
-    return defineComponent({ name, emits: [], setup: (props, context) => setup(context) });
+  return defineComponent({
+    name,
+    emits: [],
+    setup: (props, context) => setup(context)
+  });
 }
 /**
  * If props are specified outside of the {@link createComponent}
@@ -31,7 +40,7 @@ export function createView(name, setup) {
  * @returns the created props, with correct typing.
  */
 export function createProps(props) {
-    return props;
+  return props;
 }
 /**
  * Extracts props from another prop object and returns a reactive object with the specified props.
@@ -44,8 +53,7 @@ export function createProps(props) {
  * 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);
-}
+  const partial = {};
+  for (const key of keys) partial[key] = toRef(props, key);
+  return reactive(partial);
+}

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,11 +6,8 @@ import { markReadonly } from './utils';
  * @returns The first item with the specified `id` or `undefined` if none exists.
  */
 function find(array, id) {
-    const filtered = array.filter(item => item.id === id);
-    if (filtered.length > 0)
-        return filtered[0];
-    else
-        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`.
@@ -19,11 +16,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`.
@@ -34,8 +31,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.
@@ -44,17 +41,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
@@ -64,15 +58,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 = markReadonly({ find, contains, insert, remove, areSameArrays });
+export const Id = markReadonly({
+  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

@@ -1,12 +1,12 @@
 export function markReadonly(object) {
-    return object;
+  return object;
 }
 let currentId = 1;
 /**
  * Generates and returns a non random but unique id.
  */
 export function uniqueId() {
-    return currentId++;
+  return currentId++;
 }
 /**
  * Determines if a value is not null or undefined.
@@ -14,7 +14,7 @@ export function uniqueId() {
  * @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.
@@ -22,5 +22,5 @@ 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;
+}

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.d.ts

@@ -15,8 +15,14 @@ export type ValidationResult = ValidationResultValid | ValidationResultInvalid;
  * with the {@link required} rule.
  */
 export type ValidationRule = (input: InputValue) => ValidationResult;
+/**
+ * Creates a valid result.
+ */
 export declare function validResult(): ValidationResultValid;
-export declare function invalidResult(ruleKey: string, params?: Record<string, unknown>): ValidationResultInvalid;
+/**
+ * Creates an invalid result with the provided error message.
+ */
+export declare function invalidResult(errorMessage: string): ValidationResultInvalid;
 /**
  * Validates a given input with the specified rules.
  * The rules are evaluated in the order they're in the array.
@@ -76,9 +82,9 @@ export declare function option(options: string[]): ValidationRule;
  */
 export declare function regex(pattern: RegExp): ValidationRule;
 /**
- * This rule can be used if the validation logic happens somwhere else.
+ * This rule can be used if the validation logic happens somewhere else.
  * When `isValid = true` is passed, the function will return a valid result,
  * otherwise it will return the invalid result with the passed `errorKey`.
  * Like always, a falsy input is always valid to not interefere with the {@link required} rule.
  */
-export declare function external(isValid: boolean, errorKey: string): ValidationRule;
+export declare function external(isValid: boolean, errorMessage: string): ValidationRule;