@naptics/vue-collection 0.0.1

package/lib/components/NInput.d.ts

@@ -0,0 +1,232 @@
+import { type PropType } from 'vue';
+import './NInput.css';
+export declare const nInputProps: {
+    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;
+    };
+    /**
+     * The name of the input. Is displayed as a label above the input.
+     */
+    name: StringConstructor;
+    /**
+     * The placeholder of the input.
+     */
+    placeholder: StringConstructor;
+    /**
+     * The html autocomplete attribute of the input.
+     */
+    autocomplete: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The html type attribute of the input.
+     */
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The maximum value of the input.
+     */
+    max: StringConstructor;
+    /**
+     * The minimum value of the input.
+     */
+    min: StringConstructor;
+    /**
+     * If set to `true` the input is displayed with a red border.
+     */
+    error: BooleanConstructor;
+    /**
+     * If set to `true` the input is disabled and no interaction is possible.
+     */
+    disabled: BooleanConstructor;
+    /**
+     * If set to `true` the input is displayed smaller.
+     */
+    small: BooleanConstructor;
+    /**
+     * If set to `true` the input's label is hidden.
+     */
+    hideLabel: BooleanConstructor;
+    /**
+     * This is called when the input reveices focus.
+     */
+    onFocus: PropType<() => void>;
+    /**
+     * This is called when the input looses focus.
+     */
+    onBlur: PropType<() => void>;
+    value: PropType<string>;
+    onUpdateValue: PropType<(newValue: string) => void>;
+};
+export type NInputExposed = {
+    /**
+     * Request focus on the input.
+     */
+    focus(): void;
+};
+/**
+ * The base class of inputs. A styled input with a lot of configuration possibilities but no validation.
+ */
+declare const _default: import("vue").DefineComponent<{
+    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;
+    };
+    /**
+     * The name of the input. Is displayed as a label above the input.
+     */
+    name: StringConstructor;
+    /**
+     * The placeholder of the input.
+     */
+    placeholder: StringConstructor;
+    /**
+     * The html autocomplete attribute of the input.
+     */
+    autocomplete: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The html type attribute of the input.
+     */
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The maximum value of the input.
+     */
+    max: StringConstructor;
+    /**
+     * The minimum value of the input.
+     */
+    min: StringConstructor;
+    /**
+     * If set to `true` the input is displayed with a red border.
+     */
+    error: BooleanConstructor;
+    /**
+     * If set to `true` the input is disabled and no interaction is possible.
+     */
+    disabled: BooleanConstructor;
+    /**
+     * If set to `true` the input is displayed smaller.
+     */
+    small: BooleanConstructor;
+    /**
+     * If set to `true` the input's label is hidden.
+     */
+    hideLabel: BooleanConstructor;
+    /**
+     * This is called when the input reveices focus.
+     */
+    onFocus: PropType<() => void>;
+    /**
+     * This is called when the input looses focus.
+     */
+    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<{
+    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;
+    };
+    /**
+     * The name of the input. Is displayed as a label above the input.
+     */
+    name: StringConstructor;
+    /**
+     * The placeholder of the input.
+     */
+    placeholder: StringConstructor;
+    /**
+     * The html autocomplete attribute of the input.
+     */
+    autocomplete: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The html type attribute of the input.
+     */
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The maximum value of the input.
+     */
+    max: StringConstructor;
+    /**
+     * The minimum value of the input.
+     */
+    min: StringConstructor;
+    /**
+     * If set to `true` the input is displayed with a red border.
+     */
+    error: BooleanConstructor;
+    /**
+     * If set to `true` the input is disabled and no interaction is possible.
+     */
+    disabled: BooleanConstructor;
+    /**
+     * If set to `true` the input is displayed smaller.
+     */
+    small: BooleanConstructor;
+    /**
+     * If set to `true` the input's label is hidden.
+     */
+    hideLabel: BooleanConstructor;
+    /**
+     * This is called when the input reveices focus.
+     */
+    onFocus: PropType<() => void>;
+    /**
+     * This is called when the input looses focus.
+     */
+    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;
+    autocomplete: string;
+    hideLabel: boolean;
+}>;
+export default _default;

package/lib/components/NInput.jsx

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

package/lib/components/NInputPhone.d.ts

@@ -0,0 +1,150 @@
+export declare const nInputPhoneProps: {
+    input: import("vue").PropType<(props: import("./NValInput").InputSlotProps) => JSX.Element>;
+    optional: BooleanConstructor;
+    rules: {
+        type: import("vue").PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
+        default: () => never[];
+    };
+    form: import("vue").PropType<import("./ValidatedForm").ValidatedForm>;
+    error: BooleanConstructor;
+    errorMessage: StringConstructor;
+    hideErrorMessage: BooleanConstructor;
+    disableBlurValidation: BooleanConstructor;
+    tooltipText: StringConstructor;
+    tooltipContent: import("vue").PropType<() => void>;
+    tooltipHide: BooleanConstructor;
+    tooltipShow: BooleanConstructor;
+    tooltipPlacement: {
+        type: import("vue").PropType<import("./NTooltip").TooltipPlacement>;
+        default: string;
+    };
+    tooltipMaxWidth: {
+        type: import("vue").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: import("vue").PropType<() => void>;
+    onBlur: import("vue").PropType<() => void>;
+    value: import("vue").PropType<string>;
+    onUpdateValue: import("vue").PropType<(newValue: string) => void>;
+};
+/**
+ * The `NInputPhone` autoformats phone numbers and checks if they are valid.
+ */
+declare const _default: import("vue").DefineComponent<{
+    input: import("vue").PropType<(props: import("./NValInput").InputSlotProps) => JSX.Element>;
+    optional: BooleanConstructor;
+    rules: {
+        type: import("vue").PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
+        default: () => never[];
+    };
+    form: import("vue").PropType<import("./ValidatedForm").ValidatedForm>;
+    error: BooleanConstructor;
+    errorMessage: StringConstructor;
+    hideErrorMessage: BooleanConstructor;
+    disableBlurValidation: BooleanConstructor;
+    tooltipText: StringConstructor;
+    tooltipContent: import("vue").PropType<() => void>;
+    tooltipHide: BooleanConstructor;
+    tooltipShow: BooleanConstructor;
+    tooltipPlacement: {
+        type: import("vue").PropType<import("./NTooltip").TooltipPlacement>;
+        default: string;
+    };
+    tooltipMaxWidth: {
+        type: import("vue").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: import("vue").PropType<() => void>;
+    onBlur: import("vue").PropType<() => void>;
+    value: import("vue").PropType<string>;
+    onUpdateValue: import("vue").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<{
+    input: import("vue").PropType<(props: import("./NValInput").InputSlotProps) => JSX.Element>;
+    optional: BooleanConstructor;
+    rules: {
+        type: import("vue").PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
+        default: () => never[];
+    };
+    form: import("vue").PropType<import("./ValidatedForm").ValidatedForm>;
+    error: BooleanConstructor;
+    errorMessage: StringConstructor;
+    hideErrorMessage: BooleanConstructor;
+    disableBlurValidation: BooleanConstructor;
+    tooltipText: StringConstructor;
+    tooltipContent: import("vue").PropType<() => void>;
+    tooltipHide: BooleanConstructor;
+    tooltipShow: BooleanConstructor;
+    tooltipPlacement: {
+        type: import("vue").PropType<import("./NTooltip").TooltipPlacement>;
+        default: string;
+    };
+    tooltipMaxWidth: {
+        type: import("vue").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: import("vue").PropType<() => void>;
+    onBlur: import("vue").PropType<() => void>;
+    value: import("vue").PropType<string>;
+    onUpdateValue: import("vue").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: import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[];
+    autocomplete: string;
+    hideLabel: boolean;
+    optional: boolean;
+    hideErrorMessage: boolean;
+    disableBlurValidation: boolean;
+}>;
+export default _default;

package/lib/components/NInputPhone.jsx

@@ -0,0 +1,31 @@
+import { createComponent, createProps } from '../utils/component';
+import { external } from '../utils/validation';
+import { computed, Suspense } from 'vue';
+import NValInput, { nValInputProps } from './NValInput';
+export const nInputPhoneProps = createProps(nValInputProps);
+/**
+ * The `NInputPhone` autoformats phone numbers and checks if they are valid.
+ */
+export default createComponent('NInputPhoneSuspended', nInputPhoneProps, props => {
+    // Async components have to be wrapped in a suspense component.
+    return () => (<Suspense>
+            <NPhoneInput {...props}/>
+        </Suspense>);
+});
+const NPhoneInput = createComponent('NInputPhone', nInputPhoneProps, async (props) => {
+    // import dynamically for better codesplitting as the library is pretty large
+    const { parsePhoneNumber } = await import('awesome-phonenumber');
+    const DEFAULT_COUNTRY_CODE = 'CH';
+    const formattedToPlain = (number) => parsePhoneNumber(number, { regionCode: DEFAULT_COUNTRY_CODE }).number?.e164;
+    const plainToFormatted = (number) => parsePhoneNumber(number, { regionCode: DEFAULT_COUNTRY_CODE }).number?.international;
+    const onUpdateValue = (newValue) => {
+        const plain = formattedToPlain(newValue);
+        props.onUpdateValue?.(plain || newValue);
+    };
+    const value = computed(() => {
+        const formatted = plainToFormatted(props.value || '');
+        return formatted || props.value;
+    });
+    const isValid = computed(() => parsePhoneNumber(props.value || '').valid);
+    return () => (<NValInput {...{ ...props, onUpdateValue }} value={value.value} rules={external(isValid.value, 'phone')} type="tel"/>);
+});