@naptics/vue-collection 0.0.4 → 0.0.5

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>);
-});

package/components/NButton.jsx

@@ -1,58 +0,0 @@
-import { createComponent, createProps } from '../utils/component';
-import { computed } from 'vue';
-import NLoadingIndicator from './NLoadingIndicator';
-import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip';
-export const nButtonProps = createProps({
-    /**
-     * The color of the button.
-     */
-    color: {
-        type: String,
-        default: 'primary',
-    },
-    /**
-     * The html attribute, which indicates the type of the button.
-     */
-    type: {
-        type: String,
-        default: 'button',
-    },
-    /**
-     * If set to `true` the button is disabled and no interaction is possible.
-     */
-    disabled: Boolean,
-    /**
-     * If set to `true` the button will show a loading animation.
-     * Setting `loading` to `true` will also disable the button.
-     */
-    loading: Boolean,
-    /**
-     * If set to `true` the button will appear smaller.
-     */
-    small: Boolean,
-    /**
-     * This is called, when the button is clicked.
-     */
-    onClick: Function,
-    ...nToolTipPropsForImplementor,
-});
-/**
- * The `NButton` is a styled button.
- */
-export default createComponent('NButton', nButtonProps, (props, { slots }) => {
-    const isDisabled = computed(() => props.loading || props.disabled);
-    return () => (<NTooltip {...mapTooltipProps(props)}>
-            <button disabled={isDisabled.value} type={props.type} class={[
-            `block w-full font-medium rounded-md focus:outline-none focus-visible:ring-2 shadow text-${props.color}-900 relative`,
-            isDisabled.value
-                ? `bg-${props.color}-100 text-opacity-20 cursor-default`
-                : `bg-${props.color}-200 hover:bg-${props.color}-300 focus-visible:ring-${props.color}-500`,
-            props.small ? 'py-1 px-2 text-xs' : 'py-2 px-4 text-sm',
-        ]} onClick={props.onClick}>
-                <span class={{ 'opacity-10': props.loading }}>{slots.default?.()}</span>
-                {props.loading && (<div class="absolute inset-0 flex items-center justify-center opacity-50">
-                        <NLoadingIndicator color={props.color} size={props.small ? 4 : 6} shade={600}/>
-                    </div>)}
-            </button>
-        </NTooltip>);
-});

package/components/NCheckbox.jsx

@@ -1,38 +0,0 @@
-import { createComponent, createProps } from '../utils/component';
-import { vModelProps } from '../utils/vModel';
-import { nextTick, ref } from 'vue';
-export const nCheckboxProps = createProps({
-    ...vModelProps(Boolean),
-    /**
-     * The color of the checkbox.
-     */
-    color: {
-        type: String,
-        default: 'primary',
-    },
-    /**
-     * If set to `true` the checkbox is disabled and no interaction is possible.
-     */
-    disabled: Boolean,
-});
-/**
- * The `NCheckbox` is a styled checkbox.
- */
-export default createComponent('NCheckbox', nCheckboxProps, props => {
-    const toggle = () => {
-        props.onUpdateValue?.(!props.value);
-        forceUpdate();
-    };
-    const checkBoxRef = ref();
-    const updateKey = ref(0);
-    const forceUpdate = () => {
-        updateKey.value += 1;
-        nextTick(() => checkBoxRef.value?.focus());
-    };
-    return () => (<input type="checkbox" ref={checkBoxRef} checked={props.value} disabled={props.disabled} onClick={toggle} key={updateKey.value} class={[
-            `h-5 w-5 border-default-300 rounded focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-${props.color}-500`,
-            props.disabled
-                ? `cursor-default bg-default-100 text-${props.color}-200`
-                : `cursor-pointer text-${props.color}-400`,
-        ]}/>);
-});

package/components/NCheckboxLabel.jsx

@@ -1,42 +0,0 @@
-import { createComponent, createProps } from '../utils/component';
-import NCheckbox, { nCheckboxProps } from './NCheckbox';
-export const nCheckboxLabelProps = createProps({
-    ...nCheckboxProps,
-    /**
-     * The title of the checkbox.
-     */
-    title: String,
-    /**
-     * The description of the checkbox.
-     */
-    description: String,
-    /**
-     * If set to `true`, a smaller margin is applied between the label and the checkbox.
-     */
-    compact: Boolean,
-});
-/**
- * The `NCheckboxLabel` is a checkbox with a title and a description.
- */
-export default createComponent('NCheckboxLabel', nCheckboxLabelProps, props => {
-    const toggleValue = () => {
-        if (!props.disabled)
-            props.onUpdateValue?.(!props.value);
-    };
-    return () => (<div class="flex items-center">
-            <NCheckbox {...props}/>
-            <div class={`${props.compact ? 'ml-2' : 'ml-3'} text-sm`}>
-                <label onClick={toggleValue} class={[
-            'font-medium select-none',
-            props.disabled ? 'text-default-300' : 'text-default-700 cursor-pointer',
-        ]}>
-                    {props.title}
-                </label>
-                <p class={props.disabled ? 'text-default-300' : 'text-default-500'}>
-                    <span onClick={toggleValue} class={['select-none', props.disabled ? '' : 'cursor-pointer']}>
-                        {props.description}
-                    </span>
-                </p>
-            </div>
-        </div>);
-});

package/components/NCrudModal.jsx

@@ -1,89 +0,0 @@
-import { trsl } from '../i18n';
-import { createComponent, createProps } from '../utils/component';
-import { ref } from 'vue';
-import NButton from './NButton';
-import NDialog from './NDialog';
-import NFormModal, { nFormModalProps } from './NFormModal';
-export const nCrudModalProps = createProps({
-    ...nFormModalProps,
-    /**
-     * The text of the remove-button.
-     */
-    removeText: {
-        type: String,
-        default: trsl('vue-collection.action.remove'),
-    },
-    /**
-     * The color of the remove-button.
-     */
-    removeColor: {
-        type: String,
-        default: 'red',
-    },
-    /**
-     * The title of the dialog which appears when clicking on the remove-button.
-     */
-    removeDialogTitle: String,
-    /**
-     * The text of the dialog which appears when clicking on the remove-button.
-     */
-    removeDialogText: String,
-    /**
-     * The variant of the dialog which appears when clicking on the remove-button. Default is `remove`.
-     */
-    removeDialogVariant: {
-        type: String,
-        default: 'remove',
-    },
-    /**
-     * The text of the dialog's ok-button. Is already set by the `removeDialogVariant` but can be overridden.
-     */
-    removeDialogOkText: String,
-    /**
-     * If set to `true` the modal will close itself when `onRemove` is called.
-     */
-    closeOnRemove: {
-        type: Boolean,
-        default: true,
-    },
-    /**
-     * This is called, when the remove-button has been clicked and the dialog has been accepted.
-     */
-    onRemove: Function,
-});
-/**
- * The `NCrudModal` is a {@link NFormModal} which has some convenience features for a CRUD-scenario.
- * 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, { slots }) => {
-    const removeDialog = ref();
-    const remove = () => {
-        removeDialog.value?.show().then(result => {
-            if (result) {
-                props.onRemove?.();
-                if (props.closeOnRemove)
-                    props.onUpdateValue?.(false);
-            }
-        });
-    };
-    return () => (<NFormModal {...props} footer={props.footer ||
-            (({ ok, cancel }) => (<div class="flex justify-between">
-                        <div>
-                            <NButton color={props.removeColor} onClick={remove}>
-                                {props.removeText}
-                            </NButton>
-                        </div>
-                        <div>
-                            <NButton color={props.cancelColor} onClick={cancel}>
-                                {props.cancelText}
-                            </NButton>
-                            <NButton color={props.okColor} onClick={ok} class="ml-2" disabled={props.okDisabled}>
-                                {props.okText}
-                            </NButton>
-                        </div>
-                    </div>))}>
-            {slots.default?.()}
-            <NDialog ref={removeDialog} variant={props.removeDialogVariant} title={props.removeDialogTitle} text={props.removeDialogText} okText={props.removeDialogOkText}/>
-        </NFormModal>);
-});