@naptics/vue-collection 0.0.4 → 0.0.5

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

package/components/NForm.jsx

@@ -1,26 +0,0 @@
-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/components/NFormModal.jsx

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

package/components/NIconButton.jsx

@@ -1,71 +0,0 @@
-import { createComponent, createProps } from '../utils/component';
-import { RouterLink } from 'vue-router';
-import { nButtonProps } from './NButton';
-import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip';
-export const nIconButtonProps = createProps({
-    /**
-     * The icon of the icon-button.
-     */
-    icon: {
-        type: Function,
-        required: true,
-    },
-    /**
-     * The route of the icon-button. If this is set, the icon-button becomes a {@link RouterLink}.
-     */
-    route: [String, Object],
-    /**
-     * The color of the icon-button.
-     */
-    color: {
-        type: String,
-        default: 'default',
-    },
-    /**
-     * The shade of the icon-button.
-     */
-    shade: {
-        type: Number,
-        default: 500,
-    },
-    /**
-     * The size of the icon in tailwind-units.
-     */
-    size: {
-        type: Number,
-        default: 5,
-    },
-    /**
-     * The html attribute, which indicates the type of the button.
-     */
-    type: nButtonProps.type,
-    /**
-     * If set to `true` the icon-button is disabled and no interaction is possible.
-     */
-    disabled: Boolean,
-    /**
-     * This is called when the icon-button is clicked.
-     * It is only called when the `route` prop is not set on the icon-button.
-     */
-    onClick: Function,
-    ...nToolTipPropsForImplementor,
-});
-/**
- * The `NIconButton` is a regular button which does not have any text but an icon instead.
- */
-export default createComponent('NIconButton', nIconButtonProps, props => {
-    const classes = () => [
-        'block p-0.5 rounded-md focus:outline-none focus-visible:ring-2 -m-1',
-        props.disabled
-            ? `text-${props.color}-200 cursor-default`
-            : `hover:bg-${props.color}-${props.shade} hover:bg-opacity-10 text-${props.color}-${props.shade} focus-visible:ring-${props.color}-${props.shade} cursor-pointer`,
-    ];
-    const content = () => <props.icon class={`w-${props.size} h-${props.size}`}/>;
-    return () => (<NTooltip {...mapTooltipProps(props)}>
-            {props.route ? (<RouterLink to={props.route} class={classes()}>
-                    {content()}
-                </RouterLink>) : (<button type={props.type} disabled={props.disabled} class={classes()} onClick={props.onClick}>
-                    {content()}
-                </button>)}
-        </NTooltip>);
-});

package/components/NIconCircle.jsx

@@ -1,67 +0,0 @@
-import { createComponent, createProps } from '../utils/component';
-export const nIconCircleProps = createProps({
-    /**
-     * The icon of the icon-circle.
-     */
-    icon: {
-        type: Function,
-        required: true,
-    },
-    /**
-     * The color of the icon-circle.
-     */
-    color: {
-        type: String,
-        default: 'primary',
-    },
-    /**
-     * The size of the circle in "tailwind units" (4 px).
-     * Tailwind classes are used for the size, so any number can be passed.
-     * If the `iconSize` is not set, it will be adjusted automatically.
-     */
-    circleSize: Number,
-    /**
-     * The size of the icon in "tailwind units" (4 px).
-     * No tailwind classes are used for the size, so any number can be passed.
-     * If the `circleSize` is not set, it will be adjusted automatically.
-     */
-    iconSize: Number,
-    /**
-     * The shade of the icon.
-     */
-    iconShade: {
-        type: Number,
-        default: 600,
-    },
-    /**
-     * The shade of the background.
-     */
-    bgShade: {
-        type: Number,
-        default: 100,
-    },
-});
-const DEFAULT_CIRCLE_SIZE = 16;
-const SCALING_FACTOR = 0.55;
-/**
- * The `NIconCircle` is an icon with a colored circle around it.
- */
-export default createComponent('NIconCircle', nIconCircleProps, props => {
-    let circleSize = props.circleSize;
-    let iconSize = props.iconSize;
-    if (circleSize == null) {
-        if (iconSize == null)
-            circleSize = DEFAULT_CIRCLE_SIZE;
-        else
-            circleSize = iconSize / SCALING_FACTOR;
-    }
-    if (iconSize == null)
-        iconSize = circleSize * SCALING_FACTOR;
-    circleSize *= 4;
-    iconSize *= 4;
-    return () => (<div class={['flex items-center justify-center rounded-full', `bg-${props.color}-${props.bgShade}`]} style={`width: ${circleSize}px; height: ${circleSize}px`}>
-            <div class={`text-${props.color}-${props.iconShade}`} style={`width: ${iconSize}px; height: ${iconSize}px`}>
-                <props.icon />
-            </div>
-        </div>);
-});