@naptics/vue-collection 0.0.4 → 0.0.6

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

package/components/NDialog.jsx

@@ -1,144 +0,0 @@
-import { deferred } from '../utils/deferred';
-import { createComponent, createProps, extractProps } from '../utils/component';
-import { CheckIcon, ExclamationTriangleIcon, LightBulbIcon, TrashIcon } from '@heroicons/vue/24/outline';
-import { computed, ref } from 'vue';
-import NIconCircle from './NIconCircle';
-import NModal from './NModal';
-import { DialogTitle } from '@headlessui/vue';
-import { trsl } from '../i18n';
-import { vModelForRef } from '../utils/vModel';
-export const nDialogProps = createProps({
-    /**
-     * The title of the dialog.
-     */
-    title: String,
-    /**
-     * The text of the dialog.
-     */
-    text: String,
-    /**
-     * The variant of the dialog.
-     * This determines the default icon and its color
-     * as well as the default text and color of the ok-button.
-     */
-    variant: {
-        type: String,
-        default: 'warning',
-    },
-    /**
-     * The icon of the alert. This overrides the `icon` of the `variant`.
-     */
-    icon: Function,
-    /**
-     * The color of the alert's icon. This overrides the `iconColor` of the `variant`.
-     */
-    iconColor: String,
-    /**
-     * The text of the ok-button. This overrides the `okText` of the `variant`.
-     */
-    okText: String,
-    /**
-     * The color of the ok-button. This overrides the `okColor` of the `variant`.
-     */
-    okColor: String,
-    /**
-     * The text of the cancel-button.
-     */
-    cancelText: {
-        type: String,
-        default: trsl('vue-collection.action.cancel'),
-    },
-    /**
-     * The color of the cancel-button.
-     */
-    cancelColor: {
-        type: String,
-        default: 'default',
-    },
-    /**
-     * If set to `true` the cancel-button is hidden.
-     */
-    hideCancel: Boolean,
-});
-/**
- * A `NDialog` is an element to interact directly with the user.
- * It can be controlled via a ref to prompt the user and to receive their answer.
- * @example
- * const dialogRef = ref<NDialogExposed>()
- * ...
- * const onShowDialog = () => {
- *   dialofRef.value?.show().then(result => {
- *     if (result)   // dialog accepted
- *     else          // dialog cancelled
- *   })
- * }
- * ...
- * <NDialog ref={dialogRef} />
- */
-export default createComponent('NDialog', nDialogProps, (props, context) => {
-    const showDialog = ref(false);
-    let deferredPromise = null;
-    const show = () => {
-        if (deferredPromise != null) {
-            deferredPromise.reject('show() was called on the open dialog.');
-            deferredPromise = null;
-        }
-        showDialog.value = true;
-        deferredPromise = deferred();
-        return deferredPromise.promise;
-    };
-    context.expose({ show });
-    const resolveWith = (result) => {
-        deferredPromise?.resolve(result);
-        deferredPromise = null;
-    };
-    const ok = () => resolveWith(true);
-    const cancel = () => resolveWith(false);
-    const defaults = computed(() => VARIANT_DEFAULTS[props.variant]);
-    return () => (<NModal {...vModelForRef(showDialog)} {...extractProps(props, 'cancelColor', 'cancelText', 'hideCancel')} onOk={ok} onCancel={cancel} okColor={props.okColor || defaults.value.okColor} okText={props.okText || defaults.value.okText} hideX hideHeader>
-            <div class="flex space-x-4 py-2">
-                <div class="flex-grow-0">
-                    <NIconCircle icon={props.icon || defaults.value.icon} iconSize={6} color={props.iconColor || defaults.value.iconColor}/>
-                </div>
-
-                <div class="flex-grow">
-                    <DialogTitle as="h4" class="font-medium text-lg text-default-700 mb-1">
-                        {props.title}
-                    </DialogTitle>
-                    {context.slots.default?.() || <p class="text-sm text-default-500">{props.text}</p>}
-                </div>
-            </div>
-        </NModal>);
-});
-const VARIANT_DEFAULTS = {
-    success: {
-        icon: CheckIcon,
-        iconColor: 'green',
-        okText: trsl('vue-collection.action.all-right'),
-        okColor: 'green',
-    },
-    info: {
-        icon: LightBulbIcon,
-        iconColor: 'blue',
-        okText: trsl('vue-collection.action.all-right'),
-        okColor: 'blue',
-    },
-    warning: {
-        icon: ExclamationTriangleIcon,
-        iconColor: 'yellow',
-        okText: trsl('vue-collection.action.proceed'),
-        okColor: 'yellow',
-    },
-    danger: {
-        icon: ExclamationTriangleIcon,
-        iconColor: 'red',
-        okText: trsl('vue-collection.action.proceed'),
-        okColor: 'red',
-    },
-    remove: {
-        icon: TrashIcon,
-        iconColor: 'red',
-        okText: trsl('vue-collection.action.remove'),
-        okColor: 'red',
-    },
-};

package/components/NDropdown.jsx

@@ -1,92 +0,0 @@
-import { createComponent, createProps } from '../utils/component';
-import { computed, Transition } from 'vue';
-import { RouterLink } from 'vue-router';
-import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
-import { ChevronDownIcon } from '@heroicons/vue/24/solid';
-export const nDropdownProps = createProps({
-    /**
-     * The title of the dropdown-button.
-     */
-    title: String,
-    /**
-     * The items of the dropdown.
-     * The second dimension of the array is used
-     * to create groups of items, which are visually seperated.
-     */
-    items: {
-        type: Array,
-        default: () => [],
-    },
-    /**
-     * If set to `true` the panel is right-aligned to the button.
-     */
-    right: Boolean,
-    /**
-     * If set to `true` the dropdown-button is disabled and no interaction is possible.
-     */
-    disabled: Boolean,
-    /**
-     * A slot to replace the button of the dropdown.
-     */
-    button: Function,
-});
-/**
- * The `NDropdown` consists of a button and a panel with multiple actions.
- * It is useful to group multiple actions together in one place.
- */
-export default createComponent('NDropdown', nDropdownProps, (props, { slots }) => {
-    const items = computed(() => {
-        if (props.items.length == 0)
-            return [];
-        if (Array.isArray(props.items[0]))
-            return props.items;
-        else
-            return [props.items];
-    });
-    const itemWithIcon = (item) => (<div class="flex space-x-3 items-center">
-            {item.icon && <item.icon class={['h-5 w-5', item.disabled ? 'text-default-300' : 'text-default-400']}/>}
-            <span>{item.label}</span>
-        </div>);
-    return () => (<Menu as="div" class="relative inline-block text-left">
-            <div class="flex">
-                {props.button?.() || (<MenuButton disabled={props.disabled} class={[
-                'shadow w-full flex justify-between items-center text-default-700 rounded-md border bg-white border-default-300 px-4 py-2 text-sm font-medium focus:outline-none focus:ring-offset-2 focus-visible:ring-2 focus-visible:ring-primary-500',
-                props.disabled ? 'text-opacity-20 cursor-default' : 'hover:bg-default-100',
-            ]}>
-                        <span>{props.title}</span>
-                        <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5 flex-shrink-0" aria-hidden="true"/>
-                    </MenuButton>)}
-            </div>
-
-            <Transition enterActiveClass="transition ease-out duration-100" enterFromClass="transform opacity-0 scale-95" enterToClass="transform opacity-100 scale-100" leaveActiveClass="transition ease-in duration-75" leaveFromClass="transform opacity-100 scale-100" leaveToClass="transform opacity-0 scale-95">
-                <MenuItems class={[
-            'z-10 absolute w-56 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none',
-            props.right ? 'origin-top-right right-0' : 'origin-top-left left-0',
-        ]}>
-                    {slots.default?.() || (<div class="divide-y divide-default-200">
-                            {items.value.map((group, index) => (<div key={`group-${index}`} class="py-1">
-                                    {group.map((item, index) => (<MenuItem key={`item-${index}`} disabled={item.disabled}>
-                                            {({ active }) => item.disabled ? (<div class="block px-4 py-2 text-sm text-default-300">
-                                                        {itemWithIcon(item)}
-                                                    </div>) : item.route ? (<RouterLink to={item.route} class={[
-                            'block px-4 py-2 text-sm',
-                            active
-                                ? 'bg-default-100 text-default-900'
-                                : 'text-default-700',
-                        ]}>
-                                                        {itemWithIcon(item)}
-                                                    </RouterLink>) : (<button type="button" onClick={item.onClick} class={[
-                            'w-full text-left px-4 py-2 text-sm',
-                            active
-                                ? 'bg-default-100 text-default-900'
-                                : 'text-default-700',
-                        ]}>
-                                                        {itemWithIcon(item)}
-                                                    </button>)}
-                                        </MenuItem>))}
-                                </div>))}
-                        </div>)}
-                </MenuItems>
-            </Transition>
-        </Menu>);
-});

package/components/NDropzone.jsx

@@ -1,211 +0,0 @@
-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;
-}