@naptics/vue-collection 0.2.15 → 0.3.1

package/src/lib/components/NTextArea.tsx

@@ -0,0 +1,159 @@
+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 { vModelProps } from '../utils/vModel'
+import NValInput, { validationProps } from './NValInput'
+
+const nTextAreaBaseProps = {
+    ...vModelProps(String),
+    /**
+     * The name of the text area. Is displayed as a label above the text area.
+     */
+    name: String,
+    /**
+     * The placeholder of the text area.
+     */
+    placeholder: String,
+    /**
+     * The html autocomplete attribute of the text area.
+     */
+    autocomplete: {
+        type: String,
+        default: 'off',
+    },
+    /**
+     * If set to `true`, the text area is resizable in y-direction.
+     */
+    resizable: {
+        type: Boolean,
+        default: true,
+    },
+    /**
+     * The initial height of the text area in terms of
+     * how many text rows fit inside the text area.
+     * The height can be change if {@link nTextAreaProps.resizable} is `true`
+     */
+    rows: Number,
+    /**
+     * The maximum length of the input string. Entering longer strings are simply
+     * prevented, but no error message is shown to the user.
+     */
+    maxLength: Number,
+    /**
+     * If set to `true` the text area is displayed with a red border.
+     */
+    error: Boolean,
+    /**
+     * If set to `true` the text area is disabled and no interaction is possible.
+     */
+    disabled: Boolean,
+    /**
+     * If set to `true` the text area's label is hidden.
+     */
+    hideLabel: Boolean,
+    /**
+     * Adds the classes directly to the input (e.g. for shadow).
+     */
+    inputClass: String,
+    /**
+     * This is called when the text area reveices focus.
+     */
+    onFocus: Function as PropType<() => void>,
+    /**
+     * This is called when the text area looses focus.
+     */
+    onBlur: Function as PropType<() => void>,
+    ...nToolTipPropsForImplementor,
+} as const
+
+export const nTextAreaProps = {
+    ...nTextAreaBaseProps,
+    ...validationProps,
+} as const
+
+export type NTextAreaExposed = {
+    /**
+     * Request focus on the text area.
+     */
+    focus(): void
+}
+
+const Component = createComponent('NTextArea', nTextAreaProps, (props, context) => {
+    const textAreaRef = ref<NTextAreaExposed>()
+    const exposed: NTextAreaExposed = {
+        focus: () => textAreaRef.value?.focus(),
+    }
+    context.expose(exposed)
+
+    return () => (
+        <NValInput
+            {...props}
+            input={({ error, onBlur, onUpdateValue }) => (
+                <NTextAreaBase ref={textAreaRef} {...{ ...props, error, onBlur, onUpdateValue }} />
+            )}
+        />
+    )
+})
+
+export { Component as NTextArea, Component as default }
+
+/**
+ * The `NTextArea` wraps the html text area with all the features from {@link NInput} and {@link NValInput}.
+ */
+const NTextAreaBase = createComponent('NTextAreaBase', nTextAreaBaseProps, (props, context) => {
+    const textAreaRef = ref<HTMLTextAreaElement>()
+    const exposed: NTextAreaExposed = {
+        focus: () => textAreaRef.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">
+                    <textarea
+                        ref={textAreaRef}
+                        name={props.name}
+                        value={props.value}
+                        onInput={event => props.onUpdateValue?.((event.target as HTMLInputElement).value)}
+                        placeholder={props.placeholder}
+                        autocomplete={props.autocomplete}
+                        disabled={props.disabled}
+                        rows={props.rows}
+                        maxlength={props.maxLength}
+                        onFocus={() => props.onFocus?.()}
+                        onBlur={() => props.onBlur?.()}
+                        onInvalid={event => event.preventDefault()}
+                        class={[
+                            'block w-full rounded-md border focus:outline-none focus:ring-1 ',
+                            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.resizable ? 'resize-y' : 'resize-none',
+                            props.inputClass,
+                        ]}
+                    />
+
+                    <div
+                        class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"
+                        v-show={props.error}
+                    >
+                        <ExclamationCircleIcon class="h-5 w-5 text-red-700" aria-hidden="true" />
+                    </div>
+                </div>
+            </NTooltip>
+        </div>
+    )
+})

package/src/lib/components/NTooltip.css

@@ -0,0 +1,37 @@
+.arrow,
+.arrow::before {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+}
+
+.arrow {
+    visibility: hidden;
+}
+
+.arrow::before {
+    visibility: visible;
+    content: '';
+    transform: rotate(45deg);
+    @apply bg-white border border-default-200 border-solid;
+}
+
+.tooltip[data-popper-placement^='top'] > .arrow {
+    bottom: -3.8px;
+    @apply before:border-t-transparent before:border-l-transparent;
+}
+
+.tooltip[data-popper-placement^='bottom'] > .arrow {
+    top: -3.8px;
+    @apply before:border-b-white before:border-r-white;
+}
+
+.tooltip[data-popper-placement^='left'] > .arrow {
+    right: -3.8px;
+    @apply before:border-b-transparent before:border-l-transparent;
+}
+
+.tooltip[data-popper-placement^='right'] > .arrow {
+    left: -3.8px;
+    @apply before:border-t-transparent before:border-r-transparent;
+}

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())
+    }
+}