@naptics/vue-collection 0.0.4 → 0.0.6

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,15 +93,12 @@ 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
@@ -133,15 +130,12 @@ 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},
@@ -174,15 +168,12 @@ 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
@@ -209,16 +200,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,22 +3,17 @@ 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.
@@ -30,11 +25,12 @@ 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 ----------
@@ -43,14 +39,20 @@ 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
@@ -59,18 +61,17 @@ 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.
@@ -78,34 +79,50 @@ 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.
@@ -114,27 +131,36 @@ 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.
@@ -143,5 +169,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,11 +5,9 @@ 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
@@ -17,5 +15,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);
+}

package/components/NAlert.jsx

@@ -1,69 +0,0 @@
-import { createComponent, createProps } from '../utils/component';
-import { CheckCircleIcon, ExclamationCircleIcon, InformationCircleIcon, XMarkIcon } from '@heroicons/vue/24/solid';
-import { computed } from 'vue';
-import NIconButton from './NIconButton';
-import NLoadingIndicator from './NLoadingIndicator';
-export const nAlertProps = createProps({
-    /**
-     * The variant of the alert. This defines its color and icon.
-     */
-    variant: {
-        type: String,
-        default: 'success',
-    },
-    /**
-     * The text of the alert.
-     */
-    text: String,
-    /**
-     * If set to `true` the X-button of the alert is hidden.
-     */
-    hideX: Boolean,
-    /**
-     * This is called, when the X-button is clicked.
-     */
-    onDismiss: Function,
-});
-/**
- * The `NAlert` is a fully styled alert with multiple variants.
- * It can be used as a normal blocking element or as part of an alert queue.
- */
-export default createComponent('NAlert', nAlertProps, props => {
-    const variant = computed(() => VARIANTS[props.variant]);
-    return () => (<div class={`rounded-md p-3 shadow-lg bg-${variant.value.color}-50`}>
-            <div class="flex items-center">
-                <div class="flex flex-shrink-0 items-center">{variant.value.icon()}</div>
-
-                <div class="ml-3 flex-grow">
-                    <p class={`text-sm font-medium text-${variant.value.color}-900`}>{props.text}</p>
-                </div>
-
-                {!props.hideX && (<div class="flex items-center flex-shrink-0 ml-3">
-                        <NIconButton color={variant.value.color} size={5} icon={XMarkIcon} onClick={props.onDismiss}/>
-                    </div>)}
-            </div>
-        </div>);
-});
-const icon = (icon, color) => () => <icon class={`h-5 w-5 text-${color}-500`}/>;
-const VARIANTS = {
-    success: {
-        icon: icon(CheckCircleIcon, 'green'),
-        color: 'green',
-    },
-    info: {
-        icon: icon(InformationCircleIcon, 'blue'),
-        color: 'blue',
-    },
-    warning: {
-        icon: icon(ExclamationCircleIcon, 'yellow'),
-        color: 'yellow',
-    },
-    error: {
-        icon: icon(ExclamationCircleIcon, 'red'),
-        color: 'red',
-    },
-    loading: {
-        icon: () => <NLoadingIndicator color="blue" size={7} shade={500}/>,
-        color: 'blue',
-    },
-};

package/components/NBadge.jsx

@@ -1,58 +0,0 @@
-import { createComponent, createProps } from '../utils/component';
-import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip';
-export const nBadgeProps = createProps({
-    /**
-     * The text of the badge. Can alternatively be passed in the default slot.
-     */
-    text: String,
-    /**
-     * The text size, a standard tailwind text-size class.
-     */
-    textSize: {
-        type: String,
-        default: 'text-sm',
-    },
-    /**
-     * The color of the badge.
-     */
-    color: {
-        type: String,
-        default: 'primary',
-    },
-    /**
-     * The background shade of the badge.
-     */
-    shade: {
-        type: Number,
-        default: 200,
-    },
-    /**
-     * The text shade of the badge.
-     */
-    textShade: {
-        type: Number,
-        default: 900,
-    },
-    /**
-     * If set to `true` the badges text is all-caps. Default is `true`.
-     */
-    allCaps: {
-        type: Boolean,
-        default: true,
-    },
-    ...nToolTipPropsForImplementor,
-});
-/**
- * The `NBadge` is a styled element to wrap a text.
- */
-export default createComponent('NBadge', nBadgeProps, (props, { slots }) => {
-    return () => (<NTooltip {...mapTooltipProps(props)}>
-            <div class={[
-            'px-2 py-1 rounded-md font-semibold shadow',
-            `${props.textSize} bg-${props.color}-${props.shade} text-${props.color}-${props.textShade}`,
-            props.allCaps ? 'uppercase' : '',
-        ]}>
-                {slots.default?.() || props.text}
-            </div>
-        </NTooltip>);
-});

package/components/NBreadcrub.jsx

@@ -1,64 +0,0 @@
-import { createComponent, createProps } from '../utils/component';
-import { ChevronRightIcon } from '@heroicons/vue/24/solid';
-import NLink from './NLink';
-export const nBreadcrumbProps = createProps({
-    /**
-     * The items of the breadcrumb.
-     */
-    items: {
-        type: Array,
-        default: () => [],
-    },
-    /**
-     * The color of the breadcrumbs text and icons.
-     */
-    color: {
-        type: String,
-        default: 'primary',
-    },
-    /**
-     * The text-size of the breadcrumb labels.
-     */
-    textSize: {
-        type: String,
-        default: 'text-base',
-    },
-    /**
-     * The icon which is used as a seperator between two breadcrumb items.
-     */
-    icon: {
-        type: Function,
-        default: ChevronRightIcon,
-    },
-    /**
-     * The size of the icon in tailwind units.
-     */
-    iconSize: {
-        type: Number,
-        default: 5,
-    },
-    /**
-     * A slot the replace the breadcrumb labels.
-     */
-    item: Function,
-    /**
-     * A slot to replace the separators between the breadcrumb labels.
-     * The passsed item is the item before the seperator.
-     */
-    seperator: Function,
-});
-/**
- * The `NBreadcrumb` is a styled breadcrumb which can be used as a navigation in hierarchical views.
- */
-export default createComponent('NBreadcrumb', nBreadcrumbProps, props => {
-    return () => (<div class="flex flex-wrap items-center">
-            {props.items.map((item, index) => (<>
-                    {props.item?.(item, index) || (<NLink textSize={props.textSize} route={item.route} color={props.color}>
-                            {item.label}
-                        </NLink>)}
-
-                    {index < props.items.length - 1 &&
-                (props.seperator?.(item, index) || (<props.icon class={`mx-2 w-${props.iconSize} h-${props.iconSize} text-${props.color}-500`}/>))}
-                </>))}
-        </div>);
-});