@naptics/vue-collection 0.2.15 → 0.3.0

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 }

package/src/lib/components/NIconCircle.tsx

@@ -0,0 +1,78 @@
+import type { HeroIcon } from '../utils/tailwind'
+import { createComponent } from '../utils/component'
+import type { PropType } from 'vue'
+
+export const nIconCircleProps = {
+    /**
+     * The icon of the icon-circle.
+     */
+    icon: {
+        type: Function as PropType<HeroIcon>,
+        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,
+    },
+} as const
+
+const DEFAULT_CIRCLE_SIZE = 16
+const SCALING_FACTOR = 0.55
+
+/**
+ * The `NIconCircle` is an icon with a colored circle around it.
+ */
+const Component = 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>
+    )
+})
+
+export { Component as NIconCircle, Component as default }

package/src/lib/components/NInput.css

@@ -0,0 +1,11 @@
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+    -moz-appearance: textfield;
+}

package/src/lib/components/NInput.tsx

@@ -0,0 +1,139 @@
+import { createComponent } from '../utils/component'
+import { ref, type PropType } from 'vue'
+import { ExclamationCircleIcon } from '@heroicons/vue/24/solid'
+import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip'
+import './NInput.css'
+import { vModelProps } from '../utils/vModel'
+
+export const nInputProps = {
+    ...vModelProps(String),
+    /**
+     * The name of the input. Is displayed as a label above the input.
+     */
+    name: String,
+    /**
+     * The placeholder of the input.
+     */
+    placeholder: String,
+    /**
+     * The html autocomplete attribute of the input.
+     */
+    autocomplete: {
+        type: String,
+        default: 'off',
+    },
+    /**
+     * The html type attribute of the input.
+     */
+    type: {
+        type: String,
+        default: 'text',
+    },
+    /**
+     * The maximum value of the input.
+     */
+    max: String,
+    /**
+     * The minimum value of the input.
+     */
+    min: String,
+    /**
+     * If set to `true` the input is displayed with a red border.
+     */
+    error: Boolean,
+    /**
+     * If set to `true` the input is disabled and no interaction is possible.
+     */
+    disabled: Boolean,
+    /**
+     * If set to `true` the input is displayed smaller.
+     */
+    small: Boolean,
+    /**
+     * If set to `true` the input's label is hidden.
+     */
+    hideLabel: Boolean,
+    /**
+     * Adds the classes directly to the input (e.g. for shadow).
+     */
+    inputClass: String,
+    /**
+     * This is called when the input reveices focus.
+     */
+    onFocus: Function as PropType<() => void>,
+    /**
+     * This is called when the input looses focus.
+     */
+    onBlur: Function as PropType<() => void>,
+    ...nToolTipPropsForImplementor,
+} as const
+
+export type NInputExposed = {
+    /**
+     * Request focus on the input.
+     */
+    focus(): void
+}
+
+/**
+ * The base class of inputs. A styled input with a lot of configuration possibilities but no validation.
+ */
+const Component = createComponent('NInput', nInputProps, (props, context) => {
+    const inputRef = ref<HTMLInputElement>()
+    const exposed: NInputExposed = {
+        focus: () => inputRef.value?.focus(),
+    }
+    context.expose(exposed)
+
+    return () => (
+        <div>
+            {props.name && !props.hideLabel && (
+                <label
+                    for={props.name}
+                    class={['block text-sm font-medium mb-1', props.disabled ? 'text-default-300' : 'text-default-700']}
+                >
+                    {props.name}
+                </label>
+            )}
+            <NTooltip block {...mapTooltipProps(props)}>
+                <div class="relative">
+                    <input
+                        ref={inputRef}
+                        name={props.name}
+                        value={props.value}
+                        onInput={event => props.onUpdateValue?.((event.target as HTMLInputElement).value)}
+                        placeholder={props.placeholder}
+                        autocomplete={props.autocomplete}
+                        type={props.type}
+                        min={props.min}
+                        max={props.max}
+                        disabled={props.disabled}
+                        onFocus={() => props.onFocus?.()}
+                        onBlur={() => props.onBlur?.()}
+                        onInvalid={event => event.preventDefault()}
+                        class={[
+                            'block w-full rounded-md border focus:outline-none focus:ring-1 ',
+                            props.small ? 'text-xs py-0.5 px-2' : 'py-2 px-4',
+                            props.disabled
+                                ? 'text-default-500 placeholder-default-300 bg-default-50'
+                                : 'text-default-900 placeholder-default-400 ',
+                            props.error
+                                ? 'border-red-500 focus:border-red-500 focus:ring-red-500 pr-10'
+                                : 'border-default-300 focus:border-primary-500 focus:ring-primary-500',
+                            props.inputClass,
+                        ]}
+                    />
+
+                    <div
+                        class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"
+                        v-show={props.error && !props.small}
+                    >
+                        <ExclamationCircleIcon class="h-5 w-5 text-red-700" aria-hidden="true" />
+                    </div>
+                </div>
+            </NTooltip>
+        </div>
+    )
+})
+
+export { Component as NInput, Component as default }