@naptics/vue-collection 0.0.1

package/lib/components/NValInput.jsx

@@ -0,0 +1,101 @@
+import { createComponent, createProps } from '../utils/component';
+import { computed } from 'vue';
+import { ref, reactive, watch } from 'vue';
+import NInput, { nInputProps } from './NInput';
+import { validate, required } from '../utils/validation';
+export const validationProps = createProps({
+    /**
+     * If set to `true` this input is always valid when its value is empty.
+     * If set to `false` the input receives the {@link required} rule. Default is `false`.
+     */
+    optional: Boolean,
+    /**
+     * The rules which this input is checked with.
+     * The rules are checked sequentially and the error of the first failed rule is displayed.
+     * If `optional` is set to false, the rule {@link required} will be checked first.
+     */
+    rules: {
+        type: [Function, Array],
+        default: () => [],
+    },
+    /**
+     * The form, which this input will be added to.
+     * On initialization, this input will call {@link ValidatedForm.addInput} passing itself to the form.
+     */
+    form: Object,
+    /**
+     * Overrides the internal error state. If set to true, it will always display an error.
+     */
+    error: Boolean,
+    /**
+     * Overrides the internal error message. If set, this message is always displayed.
+     */
+    errorMessage: String,
+    /**
+     * If set to `true` the error message is not shown.
+     * However, the input is still marked red if it is in an error state.
+     */
+    hideErrorMessage: Boolean,
+    /**
+     * Disables the validation on blur. Should only be used in special occasions.
+     */
+    disableBlurValidation: Boolean,
+});
+export const nValInputProps = createProps({
+    ...nInputProps,
+    ...validationProps,
+    /**
+     * A slot to replace the input.
+     */
+    input: Function,
+});
+/**
+ * The `NValInput` is a `NInput` with custom validation.
+ */
+export default createComponent('NValInput', nValInputProps, (props, context) => {
+    const rules = computed(() => {
+        const otherRules = Array.isArray(props.rules) ? props.rules : [props.rules];
+        return props.optional ? otherRules : [required, ...otherRules];
+    });
+    const validationResult = ref();
+    const validateRules = (input) => {
+        const result = validate(input, rules.value);
+        validationResult.value = result;
+        return result;
+    };
+    const showError = computed(() => props.error || (validationResult.value != null && !validationResult.value.isValid));
+    const showErrorMessage = computed(() => !props.hideErrorMessage && showError.value);
+    const errorMessage = computed(() => props.errorMessage || validationResult.value?.errorMessage);
+    const validateIfError = (value = props.value) => {
+        if (showError.value)
+            validateRules(value);
+    };
+    watch(() => props.value, () => validateIfError());
+    watch(() => rules.value, () => validateIfError());
+    const onBlur = () => {
+        if (!props.disableBlurValidation)
+            validateRules(props.value);
+        props.onBlur?.();
+    };
+    const onUpdateValue = (newValue) => {
+        validateIfError(newValue);
+        props.onUpdateValue?.(newValue);
+    };
+    const inputSlotProps = reactive({
+        onBlur,
+        onUpdateValue,
+        error: showError,
+    });
+    const inputRef = ref();
+    const expose = {
+        validate: () => validateRules(props.value),
+        reset: () => (validationResult.value = undefined),
+        focus: () => inputRef.value?.focus(),
+    };
+    context.expose(expose);
+    props.form?.addInput(expose);
+    return () => (<div>
+            {props.input?.(inputSlotProps) || <NInput ref={inputRef} {...{ ...props, ...inputSlotProps }}/>}
+            {showErrorMessage.value && <p class="text-red-500 text-xs mt-1">{errorMessage.value}</p>}
+        </div>);
+});

package/lib/components/ValidatedForm.d.ts

@@ -0,0 +1,34 @@
+import type { ValidationResult } from '../utils/validation';
+import type { NValInputExposed } from './NValInput';
+/**
+ * A ValidatedForm groups different inputs together and provides functions, which operate on all inputs at the same time.
+ * With a form multiple inputs can be validated together by calling the validate function.
+ * @example
+ * const form = createValidatedForm()
+ * <NValInput ... form={form} />
+ * <NValInput ... form={form} />
+ * const onClick = () => form.validate()
+ */
+export type ValidatedForm = {
+    /**
+     * Adds the input to the list of this form.
+     * If this form is passed to a `<NValInput />` via the props, will add itself to this form.
+     * @example
+     * <NValInput ... form={form} />
+     */
+    addInput(input: NValInputExposed): void;
+    /**
+     * Validates all inputs of the form. If inputs are invalid they will show it visually.
+     * The first invalid validation result is returned.
+     */
+    validate(): ValidationResult;
+    /**
+     * Resets the validation state of all inputs.
+     */
+    reset(): void;
+};
+/**
+ * Creates a new ValidatedForm.
+ * @returns the instance of the new form.
+ */
+export declare function createValidatedForm(): ValidatedForm;

package/lib/components/ValidatedForm.js

@@ -0,0 +1,25 @@
+/**
+ * Creates a new ValidatedForm.
+ * @returns the instance of the new form.
+ */
+export function createValidatedForm() {
+    return new ValidatedFormImpl();
+}
+class ValidatedFormImpl {
+    inputs = [];
+    addInput(input) {
+        this.inputs.push(input);
+    }
+    validate() {
+        const results = this.inputs.map(input => input.validate());
+        // return first invalid result
+        for (const result of results)
+            if (result && !result.isValid)
+                return result;
+        // else return valid result
+        return { isValid: true };
+    }
+    reset() {
+        this.inputs.forEach(input => input.reset());
+    }
+}

package/lib/i18n/de/template.json

@@ -0,0 +1,10 @@
+{
+    "title": {},
+    "subtitle": {},
+    "text": {},
+    "property": {},
+    "term": {},
+    "action": {},
+    "enum": {},
+    "error": {}
+}

package/lib/i18n/de/vue-collection.json

@@ -0,0 +1,58 @@
+{
+    "title": {},
+    "subtitle": {},
+    "text": {
+        "loading-search-results": "Ergebnisse werden geladen...",
+        "no-search-results": "Keine Ergebnisse für «{input}».",
+        "drag-n-drop-files": "Datei auswählen oder per Drag & Drop hinzufügen. | Bis zu {n} Dateien auswählen oder per Drag & Drop hinzufügen.",
+        "files-selected": "Keine Datei ausgewählt. | Eine Datei ausgewählt. | {n} Dateien ausgewählt."
+    },
+    "property": {},
+    "term": {},
+    "action": {
+        "search": "Suchen",
+        "select": "Auswählen",
+        "remove": "Löschen",
+        "cancel": "Abbrechen",
+        "all-right": "Alles klar",
+        "proceed": "Fortfahren",
+        "save": "Speichern",
+        "clear-files": "Auswahl löschen."
+    },
+    "enum": {},
+    "error": {
+        "file-type": "Eine Datei wurde nicht hinzugefügt, da sie im falschen Format ist. | {n} Dateien wurden nicht hinzugefügt, da sie im falschen Format sind.",
+        "file-size": "Eine Datei wurde nicht hinzugefügt, da sie zu gross ist. | {n} Dateien wurden nicht hinzugefügt, da sie zu gross sind.",
+        "too-many-files": "Es kann nur eine Datei hinzugefügt werden. | Es können nicht mehr als {n} Dateien hinzugefügt werden."
+    },
+    "validation": {
+        "rules": {
+            "email": "Dieses Feld muss eine gültige Email-Adresse sein.",
+            "integer": "Dieses Feld muss eine Ganzzahl sein.",
+            "length": {
+                "min": "Der Text darf nicht weniger als {min} Zeichen enthalten.",
+                "max": "Der Text darf nicht mehr als {max} Zeichen enthalten.",
+                "min-max": "Der Text muss zwischen {min} und {max} Zeichen enthalten."
+            },
+            "matches": "Die Felder stimmen nicht überein.",
+            "number-range": {
+                "nan": "Dieses Feld muss eine Zahl sein.",
+                "min": "Die Zahl darf nicht kleiner als {min} sein.",
+                "max": "Die Zahl darf nicht grösser als {max} sein.",
+                "min-max": "Die Zahl muss im Bereich von {min} bis {max} liegen."
+            },
+            "option": "Dieses Feld muss eine Option aus der Liste sein.",
+            "password": {
+                "to-short": "Das Passwort muss aus mindestens 8 Zeichen bestehen.",
+                "no-lowercase": "Das Passwort muss einen Kleinbuchstaben enthalten.",
+                "no-uppercase": "Das Passwort muss einen Grossbuchstaben enthalten.",
+                "no-digits": "Das Passwort muss eine Ziffer enthalten.",
+                "no-special-chars": "Das Passwort muss ein Sonderzeichen enthalten.",
+                "unknown": "Dieses Feld erfüllt nicht die Anforderungen für ein Passwort."
+            },
+            "phone": "Dieses Feld muss eine gültige Telefonnummer sein.",
+            "required": "Dieses Feld ist ein Pflichtfeld.",
+            "regex": "Dieses Feld entspricht nicht dem geforderten Format."
+        }
+    }
+}

package/lib/i18n/de.d.ts

@@ -0,0 +1,61 @@
+declare const de: {
+    "vue-collection": {
+        title: {};
+        subtitle: {};
+        text: {
+            "loading-search-results": string;
+            "no-search-results": string;
+            "drag-n-drop-files": string;
+            "files-selected": string;
+        };
+        property: {};
+        term: {};
+        action: {
+            search: string;
+            select: string;
+            remove: string;
+            cancel: string;
+            "all-right": string;
+            proceed: string;
+            save: string;
+            "clear-files": string;
+        };
+        enum: {};
+        error: {
+            "file-type": string;
+            "file-size": string;
+            "too-many-files": string;
+        };
+        validation: {
+            rules: {
+                email: string;
+                integer: string;
+                length: {
+                    min: string;
+                    max: string;
+                    "min-max": string;
+                };
+                matches: string;
+                "number-range": {
+                    nan: string;
+                    min: string;
+                    max: string;
+                    "min-max": string;
+                };
+                option: string;
+                password: {
+                    "to-short": string;
+                    "no-lowercase": string;
+                    "no-uppercase": string;
+                    "no-digits": string;
+                    "no-special-chars": string;
+                    unknown: string;
+                };
+                phone: string;
+                required: string;
+                regex: string;
+            };
+        };
+    };
+};
+export default de;

package/lib/i18n/de.js

@@ -0,0 +1,5 @@
+import vueCollection from './de/vue-collection.json';
+const de = {
+    ['vue-collection']: vueCollection,
+};
+export default de;

package/lib/i18n/en/template.json

@@ -0,0 +1,10 @@
+{
+    "title": {},
+    "subtitle": {},
+    "text": {},
+    "property": {},
+    "term": {},
+    "action": {},
+    "enum": {},
+    "error": {}
+}

package/lib/i18n/en/vue-collection.json

@@ -0,0 +1,58 @@
+{
+    "title": {},
+    "subtitle": {},
+    "text": {
+        "loading-search-results": "Loading results...",
+        "no-search-results": "No results found for «{input}».",
+        "drag-n-drop-files": "Select a file or add it by drag & drop. | Select up to {n} files or add them by drag & drop.",
+        "files-selected": "No file selected. | One file selected. | {n} files selected."
+    },
+    "property": {},
+    "term": {},
+    "action": {
+        "search": "Search",
+        "select": "Select",
+        "remove": "Delete",
+        "cancel": "Cancel",
+        "all-right": "All right",
+        "proceed": "Continue",
+        "save": "Save",
+        "clear-files": "Clear. | Clear all."
+    },
+    "enum": {},
+    "error": {
+        "file-type": "One file has not been added as it is in the wrong format. | {n} files have not been added as they are in the wrong format.",
+        "file-size": "One file has not been added as it exceeds the maximum file size. | {n} files have not been added as they exceed the maximum file size.",
+        "too-many-files": "Only one file can be added. | Can not add more than {max} files."
+    },
+    "validation": {
+        "rules": {
+            "email": "This field must be a valid email address.",
+            "integer": "This field must be an integer.",
+            "length": {
+                "min": "The text must not have less than {min} characters.",
+                "max": "The text must not have more than {max} characters.",
+                "min-max": "The text must have a length between {min} and {max} characters."
+            },
+            "matches": "The fields don't match.",
+            "number-range": {
+                "nan": "This filed must be a number.",
+                "min": "The number must not be smaller than {min}.",
+                "max": "The number must not be bigger than {max}.",
+                "min-max": "The number must be in the range from {min} to {max}."
+            },
+            "option": "This field has to be an option from the list.",
+            "password": {
+                "to-short": "The password must have at least 8 characters.",
+                "no-lowercase": "The password must contain a lowercase letter.",
+                "no-uppercase": "The password must contain an uppercase letter.",
+                "no-digits": "The password must contain a digit.",
+                "no-special-chars": "The password must contain a special character.",
+                "unknown": "This field does not match the required password format."
+            },
+            "phone": "This field must be a valid phone number.",
+            "required": "This field is required.",
+            "regex": "This field does not conform to the required format."
+        }
+    }
+}

package/lib/i18n/en.d.ts

@@ -0,0 +1,61 @@
+declare const en: {
+    "vue-collection": {
+        title: {};
+        subtitle: {};
+        text: {
+            "loading-search-results": string;
+            "no-search-results": string;
+            "drag-n-drop-files": string;
+            "files-selected": string;
+        };
+        property: {};
+        term: {};
+        action: {
+            search: string;
+            select: string;
+            remove: string;
+            cancel: string;
+            "all-right": string;
+            proceed: string;
+            save: string;
+            "clear-files": string;
+        };
+        enum: {};
+        error: {
+            "file-type": string;
+            "file-size": string;
+            "too-many-files": string;
+        };
+        validation: {
+            rules: {
+                email: string;
+                integer: string;
+                length: {
+                    min: string;
+                    max: string;
+                    "min-max": string;
+                };
+                matches: string;
+                "number-range": {
+                    nan: string;
+                    min: string;
+                    max: string;
+                    "min-max": string;
+                };
+                option: string;
+                password: {
+                    "to-short": string;
+                    "no-lowercase": string;
+                    "no-uppercase": string;
+                    "no-digits": string;
+                    "no-special-chars": string;
+                    unknown: string;
+                };
+                phone: string;
+                required: string;
+                regex: string;
+            };
+        };
+    };
+};
+export default en;

package/lib/i18n/en.js

@@ -0,0 +1,5 @@
+import vueCollection from './en/vue-collection.json';
+const en = {
+    ['vue-collection']: vueCollection,
+};
+export default en;

package/lib/i18n/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Translates the specified key with the according message.
+ * @param key the key to translate.
+ * @param params formatting parameters for the message.
+ * @returns the translated message.
+ */
+export declare function trsl(key: string, params?: Record<string, unknown>): string;
+/**
+ * Translates the specified key using pluralization.
+ * The provided `count`is automatically passed as the parameter `n` to the translation library.
+ * @param key the key to translate.
+ * @param count the count used for the pluralization.
+ * @param params formatting parameters for the message.
+ * @returns the translated message.
+ * @see trsl
+ */
+export declare function trslc(key: string, count: number | null | undefined, params?: Record<string, unknown>): string;

package/lib/i18n/index.js

@@ -0,0 +1,34 @@
+import en from './en';
+import de from './de';
+import { createI18n } from 'vue-i18n';
+const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+        en,
+        de,
+    },
+});
+/**
+ * Translates the specified key with the according message.
+ * @param key the key to translate.
+ * @param params formatting parameters for the message.
+ * @returns the translated message.
+ */
+export function trsl(key, params) {
+    return i18n.global.t(key, params == null ? {} : params);
+}
+/**
+ * Translates the specified key using pluralization.
+ * The provided `count`is automatically passed as the parameter `n` to the translation library.
+ * @param key the key to translate.
+ * @param count the count used for the pluralization.
+ * @param params formatting parameters for the message.
+ * @returns the translated message.
+ * @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 });
+}

package/lib/index.d.ts

@@ -0,0 +1,64 @@
+import NAlert from './components/NAlert';
+export { NAlert };
+import NBadge from './components/NBadge';
+export { NBadge };
+import NBreadcrumb from './components/NBreadcrub';
+export { NBreadcrumb };
+import NButton from './components/NButton';
+export { NButton };
+import NCheckbox from './components/NCheckbox';
+export { NCheckbox };
+import NCheckboxLabel from './components/NCheckboxLabel';
+export { NCheckboxLabel };
+import NCrudModal from './components/NCrudModal';
+export { NCrudModal };
+import NDialog from './components/NDialog';
+export { NDialog };
+import NDropdown from './components/NDropdown';
+export { NDropdown };
+import NDropzone from './components/NDropzone';
+export { NDropzone };
+import NForm from './components/NForm';
+export { NForm };
+import NFormModal from './components/NFormModal';
+export { NFormModal };
+import NIconButton from './components/NIconButton';
+export { NIconButton };
+import NInput from './components/NInput';
+export { NInput };
+import NInputPhone from './components/NInputPhone';
+export { NInputPhone };
+import NInputSelect from './components/NInputSelect';
+export { NInputSelect };
+import NInputSuggestion from './components/NInputSuggestion';
+export { NInputSuggestion };
+import NLink from './components/NLink';
+export { NLink };
+import NList from './components/NList';
+export { NList };
+import NLoadingIndicator from './components/NLoadingIndicator';
+export { NLoadingIndicator };
+import NModal from './components/NModal';
+export { NModal };
+import NPagination from './components/NPagination';
+export { NPagination };
+import NSearchbar from './components/NSearchbar';
+export { NSearchbar };
+import NSearchbarList from './components/NSearchbarList';
+export { NSearchbarList };
+import NSelect from './components/NSelect';
+export { NSelect };
+import NSuggestionList from './components/NSuggestionList';
+export { NSuggestionList };
+import NTable from './components/NTable';
+export { NTable };
+import NTableAction from './components/NTableAction';
+export { NTableAction };
+import NTextArea from './components/NTextArea';
+export { NTextArea };
+import NTooltip from './components/NTooltip';
+export { NTooltip };
+import NValInput from './components/NValInput';
+export { NValInput };
+import { type ValidatedForm, createValidatedForm } from './components/ValidatedForm';
+export { ValidatedForm, createValidatedForm };

package/lib/index.js

@@ -0,0 +1,65 @@
+// All components are directly available via the entry point
+import NAlert from './components/NAlert';
+export { NAlert };
+import NBadge from './components/NBadge';
+export { NBadge };
+import NBreadcrumb from './components/NBreadcrub';
+export { NBreadcrumb };
+import NButton from './components/NButton';
+export { NButton };
+import NCheckbox from './components/NCheckbox';
+export { NCheckbox };
+import NCheckboxLabel from './components/NCheckboxLabel';
+export { NCheckboxLabel };
+import NCrudModal from './components/NCrudModal';
+export { NCrudModal };
+import NDialog from './components/NDialog';
+export { NDialog };
+import NDropdown from './components/NDropdown';
+export { NDropdown };
+import NDropzone from './components/NDropzone';
+export { NDropzone };
+import NForm from './components/NForm';
+export { NForm };
+import NFormModal from './components/NFormModal';
+export { NFormModal };
+import NIconButton from './components/NIconButton';
+export { NIconButton };
+import NInput from './components/NInput';
+export { NInput };
+import NInputPhone from './components/NInputPhone';
+export { NInputPhone };
+import NInputSelect from './components/NInputSelect';
+export { NInputSelect };
+import NInputSuggestion from './components/NInputSuggestion';
+export { NInputSuggestion };
+import NLink from './components/NLink';
+export { NLink };
+import NList from './components/NList';
+export { NList };
+import NLoadingIndicator from './components/NLoadingIndicator';
+export { NLoadingIndicator };
+import NModal from './components/NModal';
+export { NModal };
+import NPagination from './components/NPagination';
+export { NPagination };
+import NSearchbar from './components/NSearchbar';
+export { NSearchbar };
+import NSearchbarList from './components/NSearchbarList';
+export { NSearchbarList };
+import NSelect from './components/NSelect';
+export { NSelect };
+import NSuggestionList from './components/NSuggestionList';
+export { NSuggestionList };
+import NTable from './components/NTable';
+export { NTable };
+import NTableAction from './components/NTableAction';
+export { NTableAction };
+import NTextArea from './components/NTextArea';
+export { NTextArea };
+import NTooltip from './components/NTooltip';
+export { NTooltip };
+import NValInput from './components/NValInput';
+export { NValInput };
+import { createValidatedForm } from './components/ValidatedForm';
+export { createValidatedForm };

package/lib/utils/breakpoints.d.ts

@@ -0,0 +1,15 @@
+import { type ComputedRef } from 'vue';
+export type TWBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export declare const breakpoints: Readonly<Record<TWBreakpoint, number>>;
+export declare const bodyWidth: import("vue").Ref<number>;
+/**
+ * This function has to be called once in the app two ensure that the breakpoint utilities actually update.
+ * It sets a `window.onresize` listener.
+ */
+export declare function addDocumentResizeEventListener(): void;
+export declare function isWidthBreakpoint(breakpoint: TWBreakpoint): ComputedRef<boolean>;
+export declare const isWidth2xl: ComputedRef<boolean>;
+export declare const isWidthXl: ComputedRef<boolean>;
+export declare const isWidthLg: ComputedRef<boolean>;
+export declare const isWidthMd: ComputedRef<boolean>;
+export declare const isWidthSm: ComputedRef<boolean>;