@naptics/vue-collection 0.2.15 → 0.3.1

package/src/lib/components/NDropdown.tsx

@@ -0,0 +1,167 @@
+import { createComponentWithSlots } from '../utils/component'
+import { computed, Transition, type PropType } from 'vue'
+import { RouterLink, type RouteLocationRaw } from 'vue-router'
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import { ChevronDownIcon } from '@heroicons/vue/24/solid'
+import type { HeroIcon } from '../utils/tailwind'
+
+export const nDropdownProps = {
+    /**
+     * 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 as PropType<DropdownItem[] | DropdownItem[][]>,
+        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,
+    /**
+     * Adds the classes to the Button of the dropdown.
+     */
+    buttonClass: String,
+    /**
+     * A slot to replace the button of the dropdown.
+     * The passed parameter is the HeadlessUI `MenuButton` which should be
+     * used to create the button for the Dropdown to work properly.
+     */
+    button: Function as PropType<(button: typeof MenuButton) => JSX.Element>,
+} as const
+
+export type DropdownItem = {
+    /**
+     * The label of the dropdown-item.
+     */
+    label: string
+    /**
+     * The icon of the dropdown-item. Is displayed to the left of the text.
+     */
+    icon?: HeroIcon
+    /**
+     * The route of the dropdown-item. If this is set, the dropdown-item is a {@link RouterLink}.
+     */
+    route?: RouteLocationRaw
+    /**
+     * If set to `true` the dropdown-item is disabled and no interaction is possible.
+     * The other dropdown-items can still be clicked.
+     */
+    disabled?: boolean
+    /**
+     * This is called when the dropdown-item is clicked.
+     * It is only called when the `route` option is not set on the item.
+     */
+    onClick?: () => void
+}
+
+/**
+ * The `NDropdown` consists of a button and a panel with multiple actions.
+ * It is useful to group multiple actions together in one place.
+ */
+const Component = createComponentWithSlots('NDropdown', nDropdownProps, ['button'], (props, { slots }) => {
+    const items = computed<DropdownItem[][]>(() => {
+        if (props.items.length == 0) return []
+        if (Array.isArray(props.items[0])) return props.items as DropdownItem[][]
+        else return [props.items] as DropdownItem[][]
+    })
+
+    const itemWithIcon = (item: DropdownItem) => (
+        <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) || (
+                    <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',
+                            props.buttonClass,
+                        ]}
+                    >
+                        <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 }: { active: boolean }) =>
+                                                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>
+    )
+})
+
+export { Component as NDropdown, Component as default }

package/src/lib/components/NDropzone.tsx

@@ -0,0 +1,265 @@
+import { trslc } from '../i18n'
+import { createComponent } 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 = {
+    ...vModelProps<File[]>(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',
+    },
+    /**
+     * If set to `true`, the dropzone is disabled and does not accept input anymore.
+     */
+    disabled: Boolean,
+} as const
+
+/**
+ * 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.
+ */
+const Component = createComponent('NDropzone', nDropzoneProps, props => {
+    const fileError = ref<string>()
+
+    const filterAndUpdateFiles = (files: File[]) => {
+        // 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: number) => {
+        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: DragEvent) => {
+        event.preventDefault()
+        isDragOver.value = false
+
+        if (props.disabled) return
+        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: DragEvent) => {
+        event.preventDefault()
+        isDragOver.value = true
+    }
+
+    const onDragLeave = () => {
+        isDragOver.value = false
+    }
+
+    const onClick = () => {
+        fileInput.value?.click()
+    }
+
+    const fileInput = ref<HTMLInputElement>()
+
+    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  focus-visible:border-primary-500 focus:outline-none ',
+                    'flex flex-col items-center justify-center text-center text-sm select-none p-4',
+                    !props.disabled ? 'hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700' : '',
+                    props.disabled
+                        ? 'border-default-300 bg-default-50/50 text-default-500/30'
+                        : 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}
+                type="button"
+                disabled={props.disabled}
+            >
+                <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>
+    )
+})
+
+export { Component as NDropzone, Component as default }
+
+// 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: string, file: File): boolean {
+    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/src/lib/components/NForm.tsx

@@ -0,0 +1,32 @@
+import { createComponent } from '../utils/component'
+import type { PropType } from 'vue'
+import type { ValidatedForm } from './ValidatedForm'
+
+export 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: Object as 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: Function as PropType<() => void>,
+} as const
+
+/**
+ * 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.
+ */
+const Component = createComponent('NForm', nFormProps, (props, context) => {
+    const onSubmit = (event: Event) => {
+        event.preventDefault()
+        if (!props.form || props.form.validate().isValid) props.onSubmit?.()
+    }
+
+    return () => <form onSubmit={onSubmit}>{context.slots.default?.()}</form>
+})
+
+export { Component as NForm, Component as default }

package/src/lib/components/NFormModal.tsx

@@ -0,0 +1,66 @@
+import { createComponentWithSlots } from '../utils/component'
+import type { TWMaxWidth } from '../utils/tailwind'
+import { type PropType, computed } from 'vue'
+import NForm from './NForm'
+import NModal, { nModalProps } from './NModal'
+import type { ValidatedForm } from './ValidatedForm'
+
+export const nFormModalProps = {
+    ...nModalProps,
+    /**
+     * The maximum width of the modal. A regular tailwind class.
+     */
+    maxWidth: {
+        type: String as PropType<TWMaxWidth>,
+        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 as PropType<ValidatedForm>,
+} as const
+
+/**
+ * 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.
+ */
+const Component = createComponentWithSlots(
+    'NFormModal',
+    nFormModalProps,
+    ['modal', 'header', 'footer'],
+    (props, { slots }) => {
+        const onOk = () => {
+            if (!props.form || props.form.validate().isValid) {
+                props.onOk?.()
+                if (props.closeOnOk) props.onUpdateValue?.(false)
+            }
+        }
+
+        const childProps = computed(() => ({
+            ...props,
+            onOk,
+            closeOnOk: false,
+            onKeydown: (event: KeyboardEvent) => {
+                if (event.metaKey && event.key === 'Enter') onOk()
+            },
+        }))
+
+        return () => (
+            <NModal {...childProps.value}>
+                <NForm form={props.form}>{slots.default?.()}</NForm>
+            </NModal>
+        )
+    }
+)
+
+export { Component as NFormModal, Component as default }

package/src/lib/components/NIconButton.tsx

@@ -0,0 +1,92 @@
+import type { HeroIcon } from '../utils/tailwind'
+import { createComponent } from '../utils/component'
+import type { PropType } from 'vue'
+import { RouterLink, type RouteLocationRaw } from 'vue-router'
+import { nButtonProps } from './NButton'
+import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip'
+
+export const nIconButtonProps = {
+    /**
+     * The icon of the icon-button.
+     */
+    icon: {
+        type: Function as PropType<HeroIcon>,
+        required: true,
+    },
+    /**
+     * The route of the icon-button. If this is set, the icon-button becomes a {@link RouterLink}.
+     */
+    route: [String, Object] as PropType<RouteLocationRaw>,
+    /**
+     * 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,
+    /**
+     * Adds the classes to the icon-button.
+     * Use this instead of `class` to style the button, because the button is wrapped inside
+     * a div for the tooltip and `class` would be applied to the wrapping div.
+     */
+    buttonClass: String,
+    /**
+     * 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 as PropType<() => void>,
+    ...nToolTipPropsForImplementor,
+} as const
+
+/**
+ * The `NIconButton` is a regular button which does not have any text but an icon instead.
+ */
+const Component = 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`,
+        props.buttonClass,
+    ]
+
+    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>
+    )
+})
+
+export { Component as NIconButton, Component as default }