@naptics/vue-collection 0.0.1

package/lib/components/NTooltip.d.ts

@@ -0,0 +1,186 @@
+import { type ExtractedProps } from '../utils/component';
+import type { TWMaxWidth } from '../utils/tailwind';
+import { type PropType } from 'vue';
+import './NTooltip.css';
+export declare const nTooltipProps: {
+    /**
+     * The text content of the tooltip.
+     */
+    text: StringConstructor;
+    /**
+     * A slot to replace the content of the tooltip. This will override the `text` prop.
+     */
+    content: PropType<() => void>;
+    /**
+     * If set to `true` the tooltip is shown constantly.
+     */
+    show: BooleanConstructor;
+    /**
+     * If set to `true` the tooltip is hidden constantly.
+     */
+    hide: BooleanConstructor;
+    /**
+     * 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: BooleanConstructor;
+    /**
+     * The placement of the tooltip.
+     */
+    placement: {
+        type: PropType<TooltipPlacement>;
+        default: string;
+    };
+    /**
+     * The maximum width of the tooltip.
+     */
+    maxWidth: {
+        type: PropType<TWMaxWidth>;
+        default: string;
+    };
+};
+/**
+ * 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 declare const nToolTipPropsForImplementor: {
+    /**
+     * Adds a tooltip to the component with the specified text.
+     * @see {@link nTooltipProps.text}
+     */
+    tooltipText: StringConstructor;
+    /**
+     * 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: PropType<() => void>;
+    /**
+     * @see {@link nTooltipProps.hide}
+     */
+    tooltipHide: BooleanConstructor;
+    /**
+     * @see {@link nTooltipProps.show}
+     */
+    tooltipShow: BooleanConstructor;
+    /**
+     * @see {@link nTooltipProps.placement}
+     */
+    tooltipPlacement: {
+        type: PropType<TooltipPlacement>;
+        default: string;
+    };
+    /**
+     * @see {@link nTooltipProps.maxWidth}
+     */
+    tooltipMaxWidth: {
+        type: PropType<TWMaxWidth>;
+        default: string;
+    };
+};
+/**
+ * Maps the {@link nToolTipPropsForImplementor} props to normal tooltip props
+ * @returns an object containing the normal tooltip props.
+ */
+export declare function mapTooltipProps(props: ExtractedProps<typeof nToolTipPropsForImplementor>): {
+    text: string | undefined;
+    content: (() => void) | undefined;
+    hide: boolean;
+    show: boolean;
+    placement: TooltipPlacement;
+    maxWidth: TWMaxWidth;
+};
+/**
+ * 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>
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The text content of the tooltip.
+     */
+    text: StringConstructor;
+    /**
+     * A slot to replace the content of the tooltip. This will override the `text` prop.
+     */
+    content: PropType<() => void>;
+    /**
+     * If set to `true` the tooltip is shown constantly.
+     */
+    show: BooleanConstructor;
+    /**
+     * If set to `true` the tooltip is hidden constantly.
+     */
+    hide: BooleanConstructor;
+    /**
+     * 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: BooleanConstructor;
+    /**
+     * The placement of the tooltip.
+     */
+    placement: {
+        type: PropType<TooltipPlacement>;
+        default: string;
+    };
+    /**
+     * The maximum width of the tooltip.
+     */
+    maxWidth: {
+        type: PropType<TWMaxWidth>;
+        default: string;
+    };
+}, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The text content of the tooltip.
+     */
+    text: StringConstructor;
+    /**
+     * A slot to replace the content of the tooltip. This will override the `text` prop.
+     */
+    content: PropType<() => void>;
+    /**
+     * If set to `true` the tooltip is shown constantly.
+     */
+    show: BooleanConstructor;
+    /**
+     * If set to `true` the tooltip is hidden constantly.
+     */
+    hide: BooleanConstructor;
+    /**
+     * 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: BooleanConstructor;
+    /**
+     * The placement of the tooltip.
+     */
+    placement: {
+        type: PropType<TooltipPlacement>;
+        default: string;
+    };
+    /**
+     * The maximum width of the tooltip.
+     */
+    maxWidth: {
+        type: PropType<TWMaxWidth>;
+        default: string;
+    };
+}>> & {}, {
+    show: boolean;
+    hide: boolean;
+    block: boolean;
+    placement: TooltipPlacement;
+    maxWidth: TWMaxWidth;
+}>;
+export default _default;
+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/lib/components/NTooltip.jsx

@@ -0,0 +1,161 @@
+import { createComponent, createProps } from '../utils/component';
+import { uniqueId } from '../utils/utils';
+import { computed, onMounted, ref, watch, onUnmounted, Transition } from 'vue';
+import { createPopper } from '@popperjs/core';
+import { watchRef } from '../utils/vue';
+import './NTooltip.css';
+export const nTooltipProps = createProps({
+    /**
+     * 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,
+    /**
+     * 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,
+        default: 'auto',
+    },
+    /**
+     * The maximum width of the tooltip.
+     */
+    maxWidth: {
+        type: String,
+        default: 'max-w-xs',
+    },
+});
+/**
+ * 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,
+};
+/**
+ * Maps the {@link nToolTipPropsForImplementor} props to normal tooltip props
+ * @returns an object containing the normal tooltip props.
+ */
+export function mapTooltipProps(props) {
+    return {
+        text: props.tooltipText,
+        content: props.tooltipContent,
+        hide: props.tooltipHide,
+        show: props.tooltipShow,
+        placement: props.tooltipPlacement,
+        maxWidth: props.tooltipMaxWidth,
+    };
+}
+/**
+ * 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>
+ */
+export default createComponent('NTooltip', nTooltipProps, (props, { slots }) => {
+    return () => (<div class={props.block ? 'block' : 'inline-block'}>
+            {props.content || props.text ? (<NTooltipBase {...props}>{slots.default?.()}</NTooltipBase>) : (slots.default?.())}
+        </div>);
+});
+const NTooltipBase = createComponent('NTooltipBase', nTooltipProps, (props, { slots }) => {
+    let popperInstance = 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 font-normal text-default-700">
+                        {props.content?.() || props.text}
+                    </div>
+                    <div data-popper-arrow class="arrow"/>
+                </div>
+            </Transition>
+        </>);
+});

package/lib/components/NValInput.d.ts

@@ -0,0 +1,297 @@
+import { type PropType } from 'vue';
+import { type NInputExposed } from './NInput';
+import { type ValidationRule, type ValidationResult } from '../utils/validation';
+import type { ValidatedForm } from './ValidatedForm';
+export declare const validationProps: {
+    /**
+     * 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: BooleanConstructor;
+    /**
+     * 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: PropType<ValidationRule | ValidationRule[]>;
+        default: () => never[];
+    };
+    /**
+     * The form, which this input will be added to.
+     * On initialization, this input will call {@link ValidatedForm.addInput} passing itself to the form.
+     */
+    form: PropType<ValidatedForm>;
+    /**
+     * Overrides the internal error state. If set to true, it will always display an error.
+     */
+    error: BooleanConstructor;
+    /**
+     * Overrides the internal error message. If set, this message is always displayed.
+     */
+    errorMessage: StringConstructor;
+    /**
+     * 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: BooleanConstructor;
+    /**
+     * Disables the validation on blur. Should only be used in special occasions.
+     */
+    disableBlurValidation: BooleanConstructor;
+};
+export declare const nValInputProps: {
+    /**
+     * A slot to replace the input.
+     */
+    input: PropType<(props: InputSlotProps) => JSX.Element>;
+    /**
+     * 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: BooleanConstructor;
+    /**
+     * 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: PropType<ValidationRule | ValidationRule[]>;
+        default: () => never[];
+    };
+    /**
+     * The form, which this input will be added to.
+     * On initialization, this input will call {@link ValidatedForm.addInput} passing itself to the form.
+     */
+    form: PropType<ValidatedForm>;
+    /**
+     * Overrides the internal error state. If set to true, it will always display an error.
+     */
+    error: BooleanConstructor;
+    /**
+     * Overrides the internal error message. If set, this message is always displayed.
+     */
+    errorMessage: StringConstructor;
+    /**
+     * 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: BooleanConstructor;
+    /**
+     * Disables the validation on blur. Should only be used in special occasions.
+     */
+    disableBlurValidation: BooleanConstructor;
+    tooltipText: StringConstructor;
+    tooltipContent: PropType<() => void>;
+    tooltipHide: BooleanConstructor;
+    tooltipShow: BooleanConstructor;
+    tooltipPlacement: {
+        type: PropType<import("./NTooltip").TooltipPlacement>;
+        default: string;
+    };
+    tooltipMaxWidth: {
+        type: PropType<import("../utils/tailwind").TWMaxWidth>;
+        default: string;
+    };
+    name: StringConstructor;
+    placeholder: StringConstructor;
+    autocomplete: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    max: StringConstructor;
+    min: StringConstructor;
+    disabled: BooleanConstructor;
+    small: BooleanConstructor;
+    hideLabel: BooleanConstructor;
+    onFocus: PropType<() => void>;
+    onBlur: PropType<() => void>;
+    value: PropType<string>;
+    onUpdateValue: PropType<(newValue: string) => void>;
+};
+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.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * A slot to replace the input.
+     */
+    input: PropType<(props: InputSlotProps) => JSX.Element>;
+    /**
+     * 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: BooleanConstructor;
+    /**
+     * 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: PropType<ValidationRule | ValidationRule[]>;
+        default: () => never[];
+    };
+    /**
+     * The form, which this input will be added to.
+     * On initialization, this input will call {@link ValidatedForm.addInput} passing itself to the form.
+     */
+    form: PropType<ValidatedForm>;
+    /**
+     * Overrides the internal error state. If set to true, it will always display an error.
+     */
+    error: BooleanConstructor;
+    /**
+     * Overrides the internal error message. If set, this message is always displayed.
+     */
+    errorMessage: StringConstructor;
+    /**
+     * 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: BooleanConstructor;
+    /**
+     * Disables the validation on blur. Should only be used in special occasions.
+     */
+    disableBlurValidation: BooleanConstructor;
+    tooltipText: StringConstructor;
+    tooltipContent: PropType<() => void>;
+    tooltipHide: BooleanConstructor;
+    tooltipShow: BooleanConstructor;
+    tooltipPlacement: {
+        type: PropType<import("./NTooltip").TooltipPlacement>;
+        default: string;
+    };
+    tooltipMaxWidth: {
+        type: PropType<import("../utils/tailwind").TWMaxWidth>;
+        default: string;
+    };
+    name: StringConstructor;
+    placeholder: StringConstructor;
+    autocomplete: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    max: StringConstructor;
+    min: StringConstructor;
+    disabled: BooleanConstructor;
+    small: BooleanConstructor;
+    hideLabel: BooleanConstructor;
+    onFocus: PropType<() => void>;
+    onBlur: PropType<() => void>;
+    value: PropType<string>;
+    onUpdateValue: PropType<(newValue: string) => void>;
+}, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * A slot to replace the input.
+     */
+    input: PropType<(props: InputSlotProps) => JSX.Element>;
+    /**
+     * 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: BooleanConstructor;
+    /**
+     * 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: PropType<ValidationRule | ValidationRule[]>;
+        default: () => never[];
+    };
+    /**
+     * The form, which this input will be added to.
+     * On initialization, this input will call {@link ValidatedForm.addInput} passing itself to the form.
+     */
+    form: PropType<ValidatedForm>;
+    /**
+     * Overrides the internal error state. If set to true, it will always display an error.
+     */
+    error: BooleanConstructor;
+    /**
+     * Overrides the internal error message. If set, this message is always displayed.
+     */
+    errorMessage: StringConstructor;
+    /**
+     * 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: BooleanConstructor;
+    /**
+     * Disables the validation on blur. Should only be used in special occasions.
+     */
+    disableBlurValidation: BooleanConstructor;
+    tooltipText: StringConstructor;
+    tooltipContent: PropType<() => void>;
+    tooltipHide: BooleanConstructor;
+    tooltipShow: BooleanConstructor;
+    tooltipPlacement: {
+        type: PropType<import("./NTooltip").TooltipPlacement>;
+        default: string;
+    };
+    tooltipMaxWidth: {
+        type: PropType<import("../utils/tailwind").TWMaxWidth>;
+        default: string;
+    };
+    name: StringConstructor;
+    placeholder: StringConstructor;
+    autocomplete: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    max: StringConstructor;
+    min: StringConstructor;
+    disabled: BooleanConstructor;
+    small: BooleanConstructor;
+    hideLabel: BooleanConstructor;
+    onFocus: PropType<() => void>;
+    onBlur: PropType<() => void>;
+    value: PropType<string>;
+    onUpdateValue: PropType<(newValue: string) => void>;
+}>> & {}, {
+    small: boolean;
+    type: string;
+    tooltipHide: boolean;
+    tooltipShow: boolean;
+    tooltipPlacement: import("./NTooltip").TooltipPlacement;
+    tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
+    disabled: boolean;
+    error: boolean;
+    rules: ValidationRule | ValidationRule[];
+    autocomplete: string;
+    hideLabel: boolean;
+    optional: boolean;
+    hideErrorMessage: boolean;
+    disableBlurValidation: boolean;
+}>;
+export default _default;