@naptics/vue-collection 1.0.0-beta.1 → 1.0.0-beta.2

package/src/lib/components/NTooltip.tsx

@@ -1,289 +0,0 @@
-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,
-    /**
-     * The delay in milliseconds before the tooltip is shown.
-     * @default 0
-     */
-    delay: {
-        type: Number,
-        default: 0,
-    },
-} 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,
-    /**
-     * @see {@link nTooltipProps.delay}
-     */
-    tooltipDelay: nTooltipProps.delay,
-}
-
-/**
- * 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,
-        delay: props.tooltipDelay,
-    }
-}
-
-/**
- * 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(() => {
-        if (hoverTimeout) {
-            clearTimeout(hoverTimeout)
-        }
-        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 delayedIsHovering = ref(false)
-    let hoverTimeout: ReturnType<typeof setTimeout> | null = null
-
-    const showTooltip = computed(
-        () => props.show || (!props.hide && (props.delay > 0 ? delayedIsHovering.value : isHovering.value))
-    )
-
-    watch(isHovering, hovering => {
-        if (hoverTimeout) {
-            clearTimeout(hoverTimeout)
-            hoverTimeout = null
-        }
-
-        if (hovering && props.delay > 0) {
-            hoverTimeout = setTimeout(() => {
-                delayedIsHovering.value = true
-                hoverTimeout = null
-            }, props.delay)
-        } else {
-            delayedIsHovering.value = hovering
-        }
-    })
-
-    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

@@ -1,163 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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/index.ts

@@ -1,2 +0,0 @@
-import { createComponent, createView } from './utils/component'
-export { createComponent, createView }

package/src/lib/jsx.d.ts

@@ -1,13 +0,0 @@
-import type { VNode } from 'vue'
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            [elem: string]: any
-        }
-        type Element = VNode
-    }
-}
-
-export {}

package/src/lib/utils/__tests__/identifiable.spec.ts

@@ -1,72 +0,0 @@
-import { describe, expect, test } from 'vitest'
-import { Id } from '../identifiable'
-
-const one = { id: 'id1', label: 'one' }
-const two = { id: 'id2', label: 'two' }
-const three = { id: 'id3', label: 'three' }
-const four = { id: 'id4', label: 'four' }
-const all = [one, two, three, four]
-
-describe('identifiable', () => {
-    test('find', () => {
-        expect(Id.find(all, 'id1')).toMatchObject(one)
-        expect(Id.find(all, 'id3')).toMatchObject(three)
-        // check if the first is picked if multiple
-        expect(Id.find([...all, { id: 'id2', label: 'new' }], 'id2')).toMatchObject(two)
-        // check if undefined is returned if not found
-        expect(Id.find(all, 'id')).toBeUndefined()
-    })
-
-    test('contains', () => {
-        expect(Id.contains(all, 'id1')).toBe(true)
-        expect(Id.contains(all, 'id3')).toBe(true)
-        expect(Id.contains(all, 'id5')).toBe(false)
-        expect(Id.contains(all, 'id')).toBe(false)
-    })
-
-    test('insert', () => {
-        const before = [one, two, three]
-        let modify = [...before]
-
-        let after = Id.insert(modify, two, one)
-        // Check if array is still the same
-        expect(after).toMatchObject(before)
-        // Check if the reference is the same
-        expect(after).toBe(modify)
-
-        modify = [...before]
-        after = Id.insert(modify, four, three)
-        expect(after).toMatchObject([one, two, three, four])
-
-        modify = [...before]
-        const twoModified = { id: 'id2', label: 'twoooo' }
-        after = Id.insert(modify, twoModified)
-        expect(after).toMatchObject([one, twoModified, three])
-    })
-
-    test('remove', () => {
-        const before = [one, two, three]
-        let modify = [...before]
-
-        let after = Id.remove(modify, 'id')
-        // Check if array is still the same
-        expect(after).toMatchObject(before)
-        // Check if the reference is the same
-        expect(after).toBe(modify)
-
-        modify = [...before]
-        after = Id.remove(modify, 'id2')
-        expect(after).toMatchObject([one, three])
-
-        modify = [one, two, three, four]
-        after = Id.remove(modify, 'id1', 'id3')
-        expect(after).toMatchObject([two, four])
-    })
-
-    test('areSameArrays', () => {
-        const allDifferent = all.map(item => ({ ...item, label: 'different' }))
-        expect(Id.areSameArrays(all, allDifferent)).toBe(true)
-        expect(Id.areSameArrays(all, allDifferent.slice(1))).toBe(false)
-        expect(Id.areSameArrays(all, allDifferent.reverse())).toBe(false)
-    })
-})