@naptics/vue-collection 0.0.1

package/lib/components/NDropzone.jsx

@@ -0,0 +1,211 @@
+import { trslc } from '../i18n';
+import { createComponent, createProps } from '../utils/component';
+import { maxLengthSplitCenter } from '../utils/stringMaxLength';
+import { notNullish } from '../utils/utils';
+import { XMarkIcon } from '@heroicons/vue/24/solid';
+import { computed, ref } from 'vue';
+import NBadge from './NBadge';
+import NIconButton from './NIconButton';
+import NLink from './NLink';
+import { vModelProps } from '../utils/vModel';
+export const nDropzoneProps = createProps({
+    ...vModelProps(Array),
+    /**
+     * A description which files are allowed for this dropzone.
+     * This should include everything the user needs to know about
+     * the file type / the extensions and the maximum size of the file.
+     * @see {@link nDropzoneProps.accept}
+     * @see {@link nDropzoneProps.maxFileSize}
+     */
+    description: String,
+    /**
+     * The maximum amount of files which can be added to the dropzone.
+     */
+    maxFiles: {
+        type: Number,
+        default: 1,
+    },
+    /**
+     * Specifies which file types are accepted. The same syntax as with inputs of type file is used.
+     * Make sure to explain the requirements to the user in the {@link nDropzoneProps.description}.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
+     */
+    accept: String,
+    /**
+     * Specifies the maximum size of an individual file in bytes.
+     * Make sure to explain the max size to the user in the {@link nDropzoneProps.description}.
+     */
+    maxFileSize: {
+        type: Number,
+        default: 100 * 1024 * 1024,
+    },
+    /**
+     * The maximum length of the file names.
+     * Files names longer than the specified amount of characters will be shortened.
+     * @see {@link maxLengthSplitCenter}
+     */
+    maxLengthFileNames: {
+        type: Number,
+        default: 35,
+    },
+    /**
+     * A tailwind height class, which is applied to the dropzone area.
+     * It is recommended to use `min-h-*` classes,
+     * so the box is always large enough to display it's text.
+     */
+    height: {
+        type: String,
+        default: 'min-h-36',
+    },
+});
+/**
+ * The `NDropzone` is an area where files can be added by the user by drag & drop.
+ * Files can also be selected with a file chooser by clicking on the dropzone.
+ */
+export default createComponent('NDropzone', nDropzoneProps, props => {
+    const fileError = ref();
+    const filterAndUpdateFiles = (files) => {
+        // filter for mime type and max size
+        const fileTypeFilteredFiles = files.filter(file => !props.accept || testFileWithAcceptString(props.accept, file));
+        const filteredFiles = fileTypeFilteredFiles.filter(file => file.size <= props.maxFileSize);
+        // filter for already existing files
+        const currentFiles = props.value || [];
+        filteredFiles.forEach(file => {
+            if (currentFiles.filter(currFile => currFile.name == file.name).length == 0)
+                currentFiles.push(file);
+        });
+        // slice down to max amount of files
+        const newFiles = currentFiles.slice(0, props.maxFiles);
+        // error handling
+        const fileTypeFilterDiff = files.length - fileTypeFilteredFiles.length;
+        const fileSizeFilterDiff = fileTypeFilteredFiles.length - filteredFiles.length;
+        if (newFiles.length < currentFiles.length)
+            fileError.value = trslc('vue-collection.error.too-many-files', props.maxFiles, { max: props.maxFiles });
+        else if (fileSizeFilterDiff > 0) {
+            fileError.value = trslc('vue-collection.error.file-size', fileSizeFilterDiff, { n: fileSizeFilterDiff });
+        }
+        else if (fileTypeFilterDiff > 0)
+            fileError.value = trslc('vue-collection.error.file-type', fileTypeFilterDiff, { n: fileTypeFilterDiff });
+        else
+            fileError.value = undefined;
+        // update new value
+        props.onUpdateValue?.(newFiles);
+    };
+    const files = computed(() => props.value?.map((file, index) => ({
+        index,
+        name: maxLengthSplitCenter(file.name, props.maxLengthFileNames),
+    })) || []);
+    const removeFile = (index) => {
+        const newFiles = [...(props.value || [])];
+        newFiles.splice(index, 1);
+        fileError.value = undefined;
+        props.onUpdateValue?.(newFiles);
+    };
+    const clearFiles = () => {
+        fileError.value = undefined;
+        props.onUpdateValue?.([]);
+    };
+    const isDragOver = ref(false);
+    const onDrop = (event) => {
+        event.preventDefault();
+        isDragOver.value = false;
+        const transfer = event.dataTransfer;
+        if (transfer == null)
+            return;
+        if (transfer.items.length > 0) {
+            const items = [...transfer.items];
+            const files = items.map(item => (item.kind === 'file' ? item.getAsFile() : null)).filter(notNullish);
+            filterAndUpdateFiles(files);
+        }
+        else {
+            filterAndUpdateFiles([...transfer.files]);
+        }
+    };
+    const onDragOver = (event) => {
+        event.preventDefault();
+        isDragOver.value = true;
+    };
+    const onDragLeave = () => {
+        isDragOver.value = false;
+    };
+    const onClick = () => {
+        fileInput.value?.click();
+    };
+    const fileInput = ref();
+    const onInputFilesChanged = () => {
+        const input = fileInput.value;
+        if (input != null) {
+            if (input.files != null)
+                filterAndUpdateFiles([...input.files]);
+            input.value = '';
+        }
+    };
+    return () => (<div>
+            <button class={[
+            'block w-full rounded-md border-dashed border-2 hover:border-primary-300 hover:bg-primary-50 focus-visible:border-primary-500 focus:outline-none ',
+            'flex flex-col items-center justify-center text-center text-sm select-none hover:text-primary-700 p-4',
+            isDragOver.value
+                ? 'border-primary-300 bg-primary-50 text-primary-700'
+                : 'border-default-300 bg-default-50 text-default-500',
+            props.height,
+        ]} onDrop={onDrop} onDragover={onDragOver} onDragleave={onDragLeave} onClick={onClick}>
+                <input type="file" class="hidden" ref={fileInput} multiple={props.maxFiles > 1} accept={props.accept} onChange={onInputFilesChanged} onClick={event => event.stopPropagation()}/>
+
+                {/* Counterweight */}
+                <div class="flex-grow mb-2"/>
+
+                <span class="font-medium">
+                    {trslc('vue-collection.text.drag-n-drop-files', props.maxFiles, { n: props.maxFiles })}
+                </span>
+                <span>{props.description}</span>
+
+                <div class="flex-grow mt-2 flex items-end justify-center text-red-500 font-medium">
+                    <span>{fileError.value}</span>
+                </div>
+            </button>
+
+            <div class="mt-2 space-y-1">
+                <div class="flex flex-wrap gap-2 ">
+                    {files.value.map(file => (<NBadge key={file.index} color="default" allCaps={false} textSize="text-xs">
+                            <div class="flex items-center space-x-2">
+                                <span>{file.name}</span>
+                                <NIconButton icon={XMarkIcon} shade={900} size={3} onClick={() => removeFile(file.index)}/>
+                            </div>
+                        </NBadge>))}
+
+                    <div class="flex-grow text-sm text-default-500 flex items-end justify-end text-right">
+                        <span>
+                            <span>
+                                {trslc('vue-collection.text.files-selected', files.value.length, {
+            n: files.value.length,
+        })}
+                            </span>
+                            {files.value.length > 0 && (<>
+                                    <span> </span>
+                                    <NLink color="default" onClick={clearFiles}>
+                                        {trslc('vue-collection.action.clear-files', files.value.length)}
+                                    </NLink>
+                                </>)}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>);
+});
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
+const MIME_FORMAT = /^(image|audio|application|video|text)\/\*$/;
+const EXTENSION_FORMAT = /^\.\w{2,20}$/;
+function testFileWithAcceptString(accept, file) {
+    const splitted = accept.split(',').map(pattern => pattern.trim());
+    for (const pattern of splitted) {
+        if (MIME_FORMAT.test(pattern)) {
+            if (RegExp(`^${pattern.substring(0, pattern.length - 2)}\\/.{2,}$`).test(file.type))
+                return true;
+        }
+        else if (EXTENSION_FORMAT.test(pattern)) {
+            if (RegExp(`^.*${pattern}$`).test(file.name))
+                return true;
+        }
+    }
+    return false;
+}

package/lib/components/NForm.d.ts

@@ -0,0 +1,43 @@
+import type { PropType } from 'vue';
+import type { ValidatedForm } from './ValidatedForm';
+export declare const nFormProps: {
+    /**
+     * The {@link ValidatedForm} which will be used to validate the inputs.
+     * All inputs in this forms hierarchy should be added to the {@link ValidatedForm}.
+     */
+    form: PropType<ValidatedForm>;
+    /**
+     * This is called, when a button of type `submit` in the hierarchy of this view is clicked
+     * and when the validation of the `form` was successful.
+     */
+    onSubmit: PropType<() => void>;
+};
+/**
+ * The `NForm` should be used to wrap multiple inputs.
+ * If it contains a button of type `submit` in it's hierarchy,
+ * it catches the submit event and passes it to the {@link ValidatedForm} in its `form` prop.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The {@link ValidatedForm} which will be used to validate the inputs.
+     * All inputs in this forms hierarchy should be added to the {@link ValidatedForm}.
+     */
+    form: PropType<ValidatedForm>;
+    /**
+     * This is called, when a button of type `submit` in the hierarchy of this view is clicked
+     * and when the validation of the `form` was successful.
+     */
+    onSubmit: PropType<() => 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<{
+    /**
+     * The {@link ValidatedForm} which will be used to validate the inputs.
+     * All inputs in this forms hierarchy should be added to the {@link ValidatedForm}.
+     */
+    form: PropType<ValidatedForm>;
+    /**
+     * This is called, when a button of type `submit` in the hierarchy of this view is clicked
+     * and when the validation of the `form` was successful.
+     */
+    onSubmit: PropType<() => void>;
+}>> & {}, {}>;
+export default _default;

package/lib/components/NForm.jsx

@@ -0,0 +1,26 @@
+import { createComponent, createProps } from '../utils/component';
+export const nFormProps = createProps({
+    /**
+     * The {@link ValidatedForm} which will be used to validate the inputs.
+     * All inputs in this forms hierarchy should be added to the {@link ValidatedForm}.
+     */
+    form: Object,
+    /**
+     * This is called, when a button of type `submit` in the hierarchy of this view is clicked
+     * and when the validation of the `form` was successful.
+     */
+    onSubmit: Function,
+});
+/**
+ * The `NForm` should be used to wrap multiple inputs.
+ * If it contains a button of type `submit` in it's hierarchy,
+ * it catches the submit event and passes it to the {@link ValidatedForm} in its `form` prop.
+ */
+export default createComponent('NForm', nFormProps, (props, context) => {
+    const onSubmit = (event) => {
+        event.preventDefault();
+        if (!props.form || props.form.validate().isValid)
+            props.onSubmit?.();
+    };
+    return () => <form onSubmit={onSubmit}>{context.slots.default?.()}</form>;
+});

package/lib/components/NFormModal.d.ts

@@ -0,0 +1,190 @@
+import type { TWMaxWidth } from '../utils/tailwind';
+import { type PropType } from 'vue';
+import type { ValidatedForm } from './ValidatedForm';
+export declare const nFormModalProps: {
+    /**
+     * The maximum width of the modal. A regular tailwind class.
+     */
+    maxWidth: {
+        type: PropType<TWMaxWidth>;
+        default: string;
+    };
+    /**
+     * If set to `true` the modal closes when clicking on the background.
+     * Default is `false` as the accidental reseting of the whole form is very annoying.
+     */
+    closeOnBackground: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The {@link ValidatedForm} to validate the inputs.
+     * All inputs should be added to the form.
+     */
+    form: PropType<ValidatedForm>;
+    hideHeader: BooleanConstructor;
+    hideFooter: BooleanConstructor;
+    hideX: BooleanConstructor;
+    title: StringConstructor;
+    okText: {
+        type: StringConstructor;
+        default: string;
+    };
+    okColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    closeOnOk: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideOk: BooleanConstructor;
+    okDisabled: BooleanConstructor;
+    cancelText: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    hideCancel: BooleanConstructor;
+    onOk: PropType<() => void>;
+    onCancel: PropType<() => void>;
+    modal: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
+    header: PropType<() => JSX.Element>;
+    footer: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
+    value: PropType<boolean>;
+    onUpdateValue: PropType<(newValue: boolean) => void>;
+};
+/**
+ * The `NFormModal` is a {@link NModal} with an integrated form.
+ * When submitting a `NFormModal` the form is first validated and
+ * only if the validation is succesful the `onOk` event is called.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The maximum width of the modal. A regular tailwind class.
+     */
+    maxWidth: {
+        type: PropType<TWMaxWidth>;
+        default: string;
+    };
+    /**
+     * If set to `true` the modal closes when clicking on the background.
+     * Default is `false` as the accidental reseting of the whole form is very annoying.
+     */
+    closeOnBackground: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The {@link ValidatedForm} to validate the inputs.
+     * All inputs should be added to the form.
+     */
+    form: PropType<ValidatedForm>;
+    hideHeader: BooleanConstructor;
+    hideFooter: BooleanConstructor;
+    hideX: BooleanConstructor;
+    title: StringConstructor;
+    okText: {
+        type: StringConstructor;
+        default: string;
+    };
+    okColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    closeOnOk: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideOk: BooleanConstructor;
+    okDisabled: BooleanConstructor;
+    cancelText: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    hideCancel: BooleanConstructor;
+    onOk: PropType<() => void>;
+    onCancel: PropType<() => void>;
+    modal: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
+    header: PropType<() => JSX.Element>;
+    footer: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
+    value: PropType<boolean>;
+    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<{
+    /**
+     * The maximum width of the modal. A regular tailwind class.
+     */
+    maxWidth: {
+        type: PropType<TWMaxWidth>;
+        default: string;
+    };
+    /**
+     * If set to `true` the modal closes when clicking on the background.
+     * Default is `false` as the accidental reseting of the whole form is very annoying.
+     */
+    closeOnBackground: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The {@link ValidatedForm} to validate the inputs.
+     * All inputs should be added to the form.
+     */
+    form: PropType<ValidatedForm>;
+    hideHeader: BooleanConstructor;
+    hideFooter: BooleanConstructor;
+    hideX: BooleanConstructor;
+    title: StringConstructor;
+    okText: {
+        type: StringConstructor;
+        default: string;
+    };
+    okColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    closeOnOk: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideOk: BooleanConstructor;
+    okDisabled: BooleanConstructor;
+    cancelText: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    hideCancel: BooleanConstructor;
+    onOk: PropType<() => void>;
+    onCancel: PropType<() => void>;
+    modal: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
+    header: PropType<() => JSX.Element>;
+    footer: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
+    value: PropType<boolean>;
+    onUpdateValue: PropType<(newValue: boolean) => void>;
+}>> & {}, {
+    maxWidth: TWMaxWidth;
+    hideX: boolean;
+    hideHeader: boolean;
+    hideFooter: boolean;
+    okText: string;
+    okColor: string;
+    closeOnOk: boolean;
+    hideOk: boolean;
+    okDisabled: boolean;
+    cancelText: string;
+    cancelColor: string;
+    closeOnBackground: boolean;
+    hideCancel: boolean;
+}>;
+export default _default;

package/lib/components/NFormModal.jsx

@@ -0,0 +1,48 @@
+import { createComponent, createProps } from '../utils/component';
+import { reactive, toRefs } from 'vue';
+import NForm from './NForm';
+import NModal, { nModalProps } from './NModal';
+export const nFormModalProps = createProps({
+    ...nModalProps,
+    /**
+     * The maximum width of the modal. A regular tailwind class.
+     */
+    maxWidth: {
+        type: String,
+        default: 'max-w-lg',
+    },
+    /**
+     * If set to `true` the modal closes when clicking on the background.
+     * Default is `false` as the accidental reseting of the whole form is very annoying.
+     */
+    closeOnBackground: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * The {@link ValidatedForm} to validate the inputs.
+     * All inputs should be added to the form.
+     */
+    form: Object,
+});
+/**
+ * The `NFormModal` is a {@link NModal} with an integrated form.
+ * 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, { slots }) => {
+    const childProps = reactive({
+        ...toRefs(props),
+        onOk: () => {
+            if (!props.form || props.form.validate().isValid) {
+                props.onOk?.();
+                if (props.closeOnOk)
+                    props.onUpdateValue?.(false);
+            }
+        },
+        closeOnOk: false,
+    });
+    return () => (<NModal {...childProps}>
+            <NForm form={props.form}>{slots.default?.()}</NForm>
+        </NModal>);
+});