@naptics/vue-collection 0.2.14 → 0.3.0

package/src/lib/components/NTooltip.tsx

@@ -0,0 +1,250 @@
+import { createComponent, type ExtractedProps } from '../utils/component'
+import { uniqueId } from '../utils/utils'
+import type { TWMaxWidth } from '../utils/tailwind'
+import { computed, onMounted, ref, watch, type PropType, onUnmounted, Transition } from 'vue'
+import { createPopper, type Instance as PopperInstance } from '@popperjs/core'
+import { watchRef } from '../utils/vue'
+import './NTooltip.css'
+
+export const nTooltipProps = {
+    /**
+     * The text content of the tooltip.
+     */
+    text: String,
+    /**
+     * A slot to replace the content of the tooltip. This will override the `text` prop.
+     */
+    content: Function as PropType<() => JSX.Element>,
+    /**
+     * If set to `true` the tooltip is shown constantly.
+     */
+    show: Boolean,
+    /**
+     * If set to `true` the tooltip is hidden constantly.
+     */
+    hide: Boolean,
+    /**
+     * If set to `true` the `block` class is applied to the tooltip.
+     * This should be set if the content in the default slot is also block.
+     */
+    block: Boolean,
+    /**
+     * The placement of the tooltip.
+     */
+    placement: {
+        type: String as PropType<TooltipPlacement>,
+        default: 'auto',
+    },
+    /**
+     * The maximum width of the tooltip.
+     */
+    maxWidth: {
+        type: String as PropType<TWMaxWidth>,
+        default: 'max-w-xs',
+    },
+    /**
+     * Adds the classes to the (invisible) wrapper element.
+     */
+    wrapperClass: String,
+    /**
+     * Adds the classes to the container of the tooltips content.
+     */
+    contentClass: String,
+    /**
+     * Adds the classes to the tooltip arrow. Make sure to use `before:` classes
+     * to target the arrow (which is the before element).
+     */
+    arrowClass: String,
+} as const
+
+/**
+ * These props are made to use on a component which implements the tooltip
+ * and wants it to be controllable via the own props.
+ * e.g. `text` is now called `tooltipText`.
+ * They can be mapped to the normal tooltip props with {@link mapTooltipProps}
+ */
+export const nToolTipPropsForImplementor = {
+    /**
+     * Adds a tooltip to the component with the specified text.
+     * @see {@link nTooltipProps.text}
+     */
+    tooltipText: nTooltipProps.text,
+    /**
+     * A slot for the tooltip of this component.
+     * If the slot is set, the tooltip with the specified content is added to the component.
+     * @see {@link nTooltipProps.content}
+     */
+    tooltipContent: nTooltipProps.content,
+    /**
+     * @see {@link nTooltipProps.hide}
+     */
+    tooltipHide: nTooltipProps.hide,
+    /**
+     * @see {@link nTooltipProps.show}
+     */
+    tooltipShow: nTooltipProps.show,
+    /**
+     * @see {@link nTooltipProps.placement}
+     */
+    tooltipPlacement: nTooltipProps.placement,
+    /**
+     * @see {@link nTooltipProps.maxWidth}
+     */
+    tooltipMaxWidth: nTooltipProps.maxWidth,
+    /**
+     * @see {@link nTooltipProps.wrapperClass}
+     */
+    tooltipWrapperClass: nTooltipProps.wrapperClass,
+    /**
+     * @see {@link nTooltipProps.contentClass}
+     */
+    tooltipContentClass: nTooltipProps.contentClass,
+    /**
+     * @see {@link nTooltipProps.arrowClass}
+     */
+    tooltipArrowClass: nTooltipProps.arrowClass,
+}
+
+/**
+ * Maps the {@link nToolTipPropsForImplementor} props to normal tooltip props
+ * @returns an object containing the normal tooltip props.
+ */
+export function mapTooltipProps(props: ExtractedProps<typeof nToolTipPropsForImplementor>) {
+    return {
+        text: props.tooltipText,
+        content: props.tooltipContent,
+        hide: props.tooltipHide,
+        show: props.tooltipShow,
+        placement: props.tooltipPlacement,
+        maxWidth: props.tooltipMaxWidth,
+        wrapperClass: props.tooltipWrapperClass,
+        contentClass: props.tooltipContentClass,
+        arrowClass: props.tooltipArrowClass,
+    }
+}
+
+/**
+ * The `NTooltip` is a wrapper for any component which adds a tooltip to it.
+ * Any component can just be passed in the default slot and a tooltip will be added to it.
+ * Note that this component disappears when neither the `text` nor the `content`
+ * prop is passed as the tooltip would then be empty.
+ * If this is the case, the default slot will just be rendered inside a div.
+ * @example
+ * <NTooltip text="Hello">
+ *      <NButton />
+ * </NTooltip>
+ */
+const Component = createComponent('NTooltip', nTooltipProps, (props, { slots }) => {
+    return () => (
+        <div class={[props.block ? 'block' : 'inline-block', props.wrapperClass]}>
+            {props.content || props.text ? (
+                <NTooltipBase {...props}>{slots.default?.()}</NTooltipBase>
+            ) : (
+                slots.default?.()
+            )}
+        </div>
+    )
+})
+
+export { Component as NTooltip, Component as default }
+
+const NTooltipBase = createComponent('NTooltipBase', nTooltipProps, (props, { slots }) => {
+    let popperInstance: PopperInstance | null = null
+    const contentId = `content-${uniqueId()}`
+    const tooltipId = `tooltip-${uniqueId()}`
+
+    function createTooltip() {
+        const content = document.getElementById(contentId)
+        const tooltip = document.getElementById(tooltipId)
+        if (content && tooltip) {
+            popperInstance = createPopper(content, tooltip, {
+                placement: props.placement,
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [0, 8],
+                        },
+                    },
+                ],
+            })
+        } else {
+            console.error('Could not create tooltip. HTML elements for content or tooltip were not found.')
+        }
+    }
+
+    function destroyTooltip() {
+        popperInstance?.destroy()
+        popperInstance = null
+    }
+
+    onMounted(createTooltip)
+    onUnmounted(destroyTooltip)
+
+    watch(
+        () => props.placement,
+        newPlacement => popperInstance?.setOptions({ placement: newPlacement })
+    )
+
+    const isHoveringContent = ref(false)
+    const isHoveringTooltip = ref(false)
+    const isHovering = computed(() => isHoveringContent.value || isHoveringTooltip.value)
+    const showTooltip = computed(() => props.show || (!props.hide && isHovering.value))
+
+    watchRef(showTooltip, () => popperInstance?.update())
+
+    return () => (
+        <>
+            <div
+                class="p-[10px] -m-[10px]"
+                onMouseleave={() => setTimeout(() => (isHoveringContent.value = false), 10)}
+            >
+                <div id={contentId} onMouseenter={() => (isHoveringContent.value = true)}>
+                    {slots.default?.()}
+                </div>
+            </div>
+
+            <Transition
+                enterActiveClass="transition-opacity ease-out duration-100"
+                enterFromClass="opacity-0"
+                enterToClass="opacity-100"
+                leaveActiveClass="transition-opacity ease-in duration-75"
+                leaveFromClass="opacity-100"
+                leaveToClass="opacity-0"
+            >
+                <div
+                    id={tooltipId}
+                    role="tooltip"
+                    onMouseenter={() => (isHoveringTooltip.value = true)}
+                    onMouseleave={() => (isHoveringTooltip.value = false)}
+                    v-show={showTooltip.value}
+                    class={[isHovering.value ? 'z-20' : 'z-10', props.maxWidth, 'tooltip']}
+                >
+                    <div
+                        class={`bg-white rounded-md py-2 px-4 shadow-lg border-default-200 border text-sm whitespace-normal font-normal text-default-700 ${props.contentClass}`}
+                    >
+                        {props.content?.() || props.text}
+                    </div>
+                    <div data-popper-arrow class={`arrow ${props.arrowClass}`} />
+                </div>
+            </Transition>
+        </>
+    )
+})
+
+export type TooltipPlacement =
+    | 'auto'
+    | 'auto-start'
+    | 'auto-end'
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'

package/src/lib/components/NValInput.tsx

@@ -0,0 +1,163 @@
+import { createComponentWithSlots } from '../utils/component'
+import { computed, onMounted, onUnmounted } from 'vue'
+import { ref, reactive, type PropType, watch } from 'vue'
+import NInput, { nInputProps, type NInputExposed } from './NInput'
+import {
+    type ValidationRule,
+    type ValidationResult,
+    validate,
+    type InputValue,
+    required,
+    validResult,
+} from '../utils/validation'
+import type { ValidatedForm } from './ValidatedForm'
+
+export const validationProps = {
+    /**
+     * If set to `true` this inputs validation will always succeed and all validation
+     * rules are ignored. Default is `false`.
+     */
+    disableValidation: Boolean,
+    /**
+     * If set to `true` this input is always valid when its value is empty.
+     * If set to `false` the input receives the {@link required} rule. Default is `false`.
+     */
+    optional: Boolean,
+    /**
+     * The rules which this input is checked with.
+     * The rules are checked sequentially and the error of the first failed rule is displayed.
+     * If `optional` is set to false, the rule {@link required} will be checked first.
+     */
+    rules: {
+        type: [Function, Array] as PropType<ValidationRule[] | ValidationRule>,
+        default: () => [],
+    },
+    /**
+     * The form, which this input will be added to.
+     * On initialization, this input will call {@link ValidatedForm.addInput} passing itself to the form.
+     */
+    form: Object as PropType<ValidatedForm>,
+    /**
+     * Overrides the internal error state. If set to true, it will always display an error.
+     */
+    error: Boolean,
+    /**
+     * Overrides the internal error message. If set, this message is always displayed.
+     */
+    errorMessage: String,
+    /**
+     * If set to `true` the error message is not shown.
+     * However, the input is still marked red if it is in an error state.
+     */
+    hideErrorMessage: Boolean,
+    /**
+     * Disables the validation on blur. Should only be used in special occasions.
+     */
+    disableBlurValidation: Boolean,
+} as const
+
+export const nValInputProps = {
+    ...nInputProps,
+    ...validationProps,
+    /**
+     * A slot to replace the input.
+     */
+    input: Function as PropType<(props: InputSlotProps) => JSX.Element>,
+} as const
+
+export type InputSlotProps = {
+    onBlur(): void
+    onUpdateValue(newValue: string): void
+    error: boolean
+}
+
+/**
+ * The exposed functions of NValInput
+ */
+export type NValInputExposed = {
+    /**
+     * Validates the input and returns the validation result
+     */
+    validate: () => ValidationResult
+    /**
+     * Resets the validation state of the input.
+     */
+    reset: () => void
+} & NInputExposed
+
+/**
+ * The `NValInput` is a `NInput` with custom validation.
+ */
+const Component = createComponentWithSlots('NValInput', nValInputProps, ['input'], (props, context) => {
+    const rules = computed(() => {
+        const otherRules = Array.isArray(props.rules) ? props.rules : [props.rules]
+        return props.optional ? otherRules : [required, ...otherRules]
+    })
+
+    const validationResult = ref<ValidationResult>()
+    const validateRules = (input: InputValue) => {
+        const result = props.disableValidation ? validResult() : validate(input, rules.value)
+        validationResult.value = result
+        return result
+    }
+
+    const showError = computed(() => props.error || (validationResult.value != null && !validationResult.value.isValid))
+    const showErrorMessage = computed(() => !props.hideErrorMessage && showError.value)
+    const errorMessage = computed(() => props.errorMessage || validationResult.value?.errorMessage)
+
+    const validateIfError = (value = props.value) => {
+        if (showError.value) validateRules(value)
+    }
+
+    watch(
+        () => props.value,
+        () => validateIfError()
+    )
+
+    watch(
+        () => rules.value,
+        () => validateIfError()
+    )
+
+    watch(
+        () => props.disableValidation,
+        () => validateIfError()
+    )
+
+    const onBlur = () => {
+        if (!props.disableBlurValidation) validateRules(props.value)
+        props.onBlur?.()
+    }
+
+    const onUpdateValue = (newValue: string) => {
+        validateIfError(newValue)
+        props.onUpdateValue?.(newValue)
+    }
+
+    const inputSlotProps: InputSlotProps = reactive({
+        onBlur,
+        onUpdateValue,
+        error: showError,
+    })
+
+    const inputRef = ref<NInputExposed>()
+    const expose: NValInputExposed = {
+        validate: () => validateRules(props.value),
+        reset: () => (validationResult.value = undefined),
+        focus: () => inputRef.value?.focus(),
+    }
+    context.expose(expose)
+
+    let assignedId: string | undefined = undefined
+    onMounted(() => (assignedId = props.form?.addInput(expose)))
+    onUnmounted(() => assignedId && props.form?.removeInput(assignedId))
+
+    return () => (
+        <div>
+            {props.input?.(inputSlotProps) || <NInput ref={inputRef} {...{ ...props, ...inputSlotProps }} />}
+            {showErrorMessage.value && <p class="text-red-500 text-xs mt-1">{errorMessage.value}</p>}
+        </div>
+    )
+})
+
+export { Component as NValInput, Component as default }

package/src/lib/components/ValidatedForm.ts

@@ -0,0 +1,71 @@
+import { Id, type Identifiable } from '../utils/identifiable'
+import { uniqueId } from '../utils/utils'
+import type { ValidationResult } from '../utils/validation'
+import type { NValInputExposed } from './NValInput'
+
+/**
+ * A ValidatedForm groups different inputs together and provides functions, which operate on all inputs at the same time.
+ * With a form multiple inputs can be validated together by calling the validate function.
+ * @example
+ * const form = createValidatedForm()
+ * <NValInput ... form={form} />
+ * <NValInput ... form={form} />
+ * const onClick = () => form.validate()
+ */
+export type ValidatedForm = {
+    /**
+     * Adds the input to the list of this form and returns the assigned `id`.
+     * If this form is passed to a `<NValInput />` via the props, will add itself to this form.
+     * @returns the newly assigned `id` of the added input.
+     * @example
+     * <NValInput ... form={form} />
+     */
+    addInput(input: NValInputExposed): string
+    /**
+     * Removes the input with the given `id` from this form.
+     */
+    removeInput(id: string): void
+    /**
+     * Validates all inputs of the form. If inputs are invalid they will show it visually.
+     * The first invalid validation result is returned.
+     */
+    validate(): ValidationResult
+    /**
+     * Resets the validation state of all inputs.
+     */
+    reset(): void
+}
+
+/**
+ * Creates a new ValidatedForm.
+ * @returns the instance of the new form.
+ */
+export function createValidatedForm(): ValidatedForm {
+    return new ValidatedFormImpl()
+}
+
+class ValidatedFormImpl implements ValidatedForm {
+    inputs: (NValInputExposed & Identifiable)[] = []
+
+    addInput(input: NValInputExposed): string {
+        const id = `input-${uniqueId()}`
+        this.inputs.push({ id, ...input })
+        return id
+    }
+
+    removeInput(id: string): void {
+        Id.remove(this.inputs, id)
+    }
+
+    validate(): ValidationResult {
+        const results = this.inputs.map(input => input.validate())
+        // return first invalid result
+        for (const result of results) if (result && !result.isValid) return result
+        // else return valid result
+        return { isValid: true }
+    }
+
+    reset(): void {
+        this.inputs.forEach(input => input.reset())
+    }
+}

package/src/lib/components/__tests__/NButton.spec.tsx

@@ -0,0 +1,26 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import NButton from '../NButton'
+
+describe('<NButton>', () => {
+    it('shows text', () => {
+        const button = mount(() => <NButton>Click me!</NButton>)
+        expect(button.text()).toMatch('Click me!')
+    })
+
+    it('calls onClick when clicked', async () => {
+        const onClick = vi.fn()
+        const button = mount(() => <NButton onClick={onClick} />).get('button')
+        await button.trigger('click')
+        expect(onClick).toHaveBeenCalledOnce()
+        await button.trigger('click')
+        expect(onClick).toHaveBeenCalledTimes(2)
+    })
+
+    it('does not call onClick when disabled', async () => {
+        const onClick = vi.fn()
+        const button = mount(() => <NButton onClick={onClick} disabled={true} />).get('button')
+        await button.trigger('click')
+        expect(onClick).not.toHaveBeenCalled()
+    })
+})

package/src/lib/components/__tests__/NCheckbox.spec.tsx

@@ -0,0 +1,39 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, test, vi } from 'vitest'
+import NCheckbox from '../NCheckbox'
+
+describe('<NCheckbox>', () => {
+    test('handles value and calls onUpdateValue correctly', async () => {
+        const onUpdateValue = vi.fn()
+
+        let checkbox = mount(() => <NCheckbox value={false} onUpdateValue={onUpdateValue} />).get('input')
+        await checkbox.trigger('click')
+        expect(onUpdateValue).toHaveBeenLastCalledWith(true)
+        expect(onUpdateValue).toHaveBeenCalledTimes(1)
+
+        // test twice (should not have changed because we did not change the value)
+        await checkbox.trigger('click')
+        expect(onUpdateValue).toHaveBeenLastCalledWith(true)
+        expect(onUpdateValue).toHaveBeenCalledTimes(2)
+
+        onUpdateValue.mockReset()
+        checkbox = mount(() => <NCheckbox value={true} onUpdateValue={onUpdateValue} />).get('input')
+
+        await checkbox.trigger('click')
+        expect(onUpdateValue).toHaveBeenLastCalledWith(false)
+        expect(onUpdateValue).toHaveBeenCalledTimes(1)
+
+        // test twice (should not have changed because we did not change the value)
+        await checkbox.trigger('click')
+        expect(onUpdateValue).toHaveBeenLastCalledWith(false)
+        expect(onUpdateValue).toHaveBeenCalledTimes(2)
+    })
+
+    test('does not call onUpdateValue when disabled', async () => {
+        const onUpdateValue = vi.fn()
+
+        const checkbox = mount(() => <NCheckbox disabled onUpdateValue={onUpdateValue} />).get('input')
+        await checkbox.trigger('click')
+        expect(onUpdateValue).not.toHaveBeenCalled()
+    })
+})

package/src/lib/i18n/de/vue-collection.json

@@ -0,0 +1,58 @@
+{
+    "title": {},
+    "subtitle": {},
+    "text": {
+        "loading-search-results": "Ergebnisse werden geladen...",
+        "no-search-results": "Keine Ergebnisse für «{input}».",
+        "drag-n-drop-files": "Datei auswählen oder per Drag & Drop hinzufügen. | Bis zu {n} Dateien auswählen oder per Drag & Drop hinzufügen.",
+        "files-selected": "Keine Datei ausgewählt. | Eine Datei ausgewählt. | {n} Dateien ausgewählt."
+    },
+    "property": {},
+    "term": {},
+    "action": {
+        "search": "Suchen",
+        "select": "Auswählen",
+        "remove": "Löschen",
+        "cancel": "Abbrechen",
+        "all-right": "Alles klar",
+        "proceed": "Fortfahren",
+        "save": "Speichern",
+        "clear-files": "Auswahl löschen."
+    },
+    "enum": {},
+    "error": {
+        "file-type": "Eine Datei wurde nicht hinzugefügt, da sie im falschen Format ist. | {n} Dateien wurden nicht hinzugefügt, da sie im falschen Format sind.",
+        "file-size": "Eine Datei wurde nicht hinzugefügt, da sie zu gross ist. | {n} Dateien wurden nicht hinzugefügt, da sie zu gross sind.",
+        "too-many-files": "Es kann nur eine Datei hinzugefügt werden. | Es können nicht mehr als {n} Dateien hinzugefügt werden."
+    },
+    "validation": {
+        "rules": {
+            "email": "Dieses Feld muss eine gültige Email-Adresse sein.",
+            "integer": "Dieses Feld muss eine Ganzzahl sein.",
+            "length": {
+                "min": "Der Text darf nicht weniger als {min} Zeichen enthalten.",
+                "max": "Der Text darf nicht mehr als {max} Zeichen enthalten.",
+                "min-max": "Der Text muss zwischen {min} und {max} Zeichen enthalten."
+            },
+            "matches": "Die Felder stimmen nicht überein.",
+            "number-range": {
+                "nan": "Dieses Feld muss eine Zahl sein.",
+                "min": "Die Zahl darf nicht kleiner als {min} sein.",
+                "max": "Die Zahl darf nicht grösser als {max} sein.",
+                "min-max": "Die Zahl muss im Bereich von {min} bis {max} liegen."
+            },
+            "option": "Dieses Feld muss eine Option aus der Liste sein.",
+            "password": {
+                "to-short": "Das Passwort muss aus mindestens 8 Zeichen bestehen.",
+                "no-lowercase": "Das Passwort muss einen Kleinbuchstaben enthalten.",
+                "no-uppercase": "Das Passwort muss einen Grossbuchstaben enthalten.",
+                "no-digits": "Das Passwort muss eine Ziffer enthalten.",
+                "no-special-chars": "Das Passwort muss ein Sonderzeichen enthalten.",
+                "unknown": "Dieses Feld erfüllt nicht die Anforderungen für ein Passwort."
+            },
+            "phone": "Dieses Feld muss eine gültige Telefonnummer sein.",
+            "required": "Dieses Feld ist ein Pflichtfeld.",
+            "regex": "Dieses Feld entspricht nicht dem geforderten Format."
+        }
+    }
+}

package/src/lib/i18n/en/vue-collection.json

@@ -0,0 +1,58 @@
+{
+    "title": {},
+    "subtitle": {},
+    "text": {
+        "loading-search-results": "Loading results...",
+        "no-search-results": "No results found for «{input}».",
+        "drag-n-drop-files": "Select a file or add it by drag & drop. | Select up to {n} files or add them by drag & drop.",
+        "files-selected": "No file selected. | One file selected. | {n} files selected."
+    },
+    "property": {},
+    "term": {},
+    "action": {
+        "search": "Search",
+        "select": "Select",
+        "remove": "Delete",
+        "cancel": "Cancel",
+        "all-right": "All right",
+        "proceed": "Continue",
+        "save": "Save",
+        "clear-files": "Clear. | Clear all."
+    },
+    "enum": {},
+    "error": {
+        "file-type": "One file has not been added as it is in the wrong format. | {n} files have not been added as they are in the wrong format.",
+        "file-size": "One file has not been added as it exceeds the maximum file size. | {n} files have not been added as they exceed the maximum file size.",
+        "too-many-files": "Only one file can be added. | Can not add more than {max} files."
+    },
+    "validation": {
+        "rules": {
+            "email": "This field must be a valid email address.",
+            "integer": "This field must be an integer.",
+            "length": {
+                "min": "The text must not have less than {min} characters.",
+                "max": "The text must not have more than {max} characters.",
+                "min-max": "The text must have a length between {min} and {max} characters."
+            },
+            "matches": "The fields don't match.",
+            "number-range": {
+                "nan": "This filed must be a number.",
+                "min": "The number must not be smaller than {min}.",
+                "max": "The number must not be bigger than {max}.",
+                "min-max": "The number must be in the range from {min} to {max}."
+            },
+            "option": "This field has to be an option from the list.",
+            "password": {
+                "to-short": "The password must have at least 8 characters.",
+                "no-lowercase": "The password must contain a lowercase letter.",
+                "no-uppercase": "The password must contain an uppercase letter.",
+                "no-digits": "The password must contain a digit.",
+                "no-special-chars": "The password must contain a special character.",
+                "unknown": "This field does not match the required password format."
+            },
+            "phone": "This field must be a valid phone number.",
+            "required": "This field is required.",
+            "regex": "This field does not conform to the required format."
+        }
+    }
+}