@naptics/vue-collection 0.0.1

package/lib/components/NInputSelect.d.ts

@@ -0,0 +1,271 @@
+import { type Identifiable } from '../utils/identifiable';
+import { type PropType } from 'vue';
+export declare const nInputSelectProps: {
+    /**
+     * The id of the currently selected option of this input.
+     */
+    value: StringConstructor;
+    /**
+     * This is called with the newly selected id when the selection has changed.
+     * This happens, when an item from the suggestion list is selected or the
+     * input matches a selection option exactly.
+     * If no id is selected, the empty string is passed, in order to
+     * match the API of all other inputs who never pass `undefined`.
+     */
+    onUpdateValue: PropType<(newValue: string) => void>;
+    /**
+     * The options which are allowed and suggested for this input.
+     * The options are filtered based on the user input.
+     */
+    options: {
+        type: PropType<InputSelectOption[]>;
+        default: () => never[];
+    };
+    /**
+     * @see {@link nValInputProps.optional}
+     */
+    optional: BooleanConstructor;
+    /**
+     * @see {@link nValInputProps.form}
+     */
+    form: PropType<import("./ValidatedForm").ValidatedForm>;
+    /**
+     * @see {@link nValInputProps.error}
+     */
+    error: BooleanConstructor;
+    /**
+     * @see {@link nValInputProps.errorMessage}
+     */
+    errorMessage: StringConstructor;
+    /**
+     * If set to `true` the list is hidden even if there are still matching items in the list.
+     */
+    hideList: BooleanConstructor;
+    /**
+     * @see {@link nSuggestionListProps.maxItems}
+     */
+    maxItems: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    /**
+     * @see {@link nSuggestionListProps.listItem}
+     */
+    listItem: PropType<(props: import("./NSuggestionList").ItemSlotProps<import("./NSuggestionList").SuggestionItem>) => JSX.Element>;
+    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>;
+};
+export type InputSelectOption = Identifiable & {
+    label: string;
+} & Record<string, unknown>;
+/**
+ * The `NInputSelect` is very similar to the {@link NSelect}, but instead of a select input it is a regular input.
+ * The user is forced to use a value from the specified options of the input.
+ * While they type, the list of options is shown to them and filtered based on their input.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The id of the currently selected option of this input.
+     */
+    value: StringConstructor;
+    /**
+     * This is called with the newly selected id when the selection has changed.
+     * This happens, when an item from the suggestion list is selected or the
+     * input matches a selection option exactly.
+     * If no id is selected, the empty string is passed, in order to
+     * match the API of all other inputs who never pass `undefined`.
+     */
+    onUpdateValue: PropType<(newValue: string) => void>;
+    /**
+     * The options which are allowed and suggested for this input.
+     * The options are filtered based on the user input.
+     */
+    options: {
+        type: PropType<InputSelectOption[]>;
+        default: () => never[];
+    };
+    /**
+     * @see {@link nValInputProps.optional}
+     */
+    optional: BooleanConstructor;
+    /**
+     * @see {@link nValInputProps.form}
+     */
+    form: PropType<import("./ValidatedForm").ValidatedForm>;
+    /**
+     * @see {@link nValInputProps.error}
+     */
+    error: BooleanConstructor;
+    /**
+     * @see {@link nValInputProps.errorMessage}
+     */
+    errorMessage: StringConstructor;
+    /**
+     * If set to `true` the list is hidden even if there are still matching items in the list.
+     */
+    hideList: BooleanConstructor;
+    /**
+     * @see {@link nSuggestionListProps.maxItems}
+     */
+    maxItems: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    /**
+     * @see {@link nSuggestionListProps.listItem}
+     */
+    listItem: PropType<(props: import("./NSuggestionList").ItemSlotProps<import("./NSuggestionList").SuggestionItem>) => JSX.Element>;
+    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>;
+}, 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 id of the currently selected option of this input.
+     */
+    value: StringConstructor;
+    /**
+     * This is called with the newly selected id when the selection has changed.
+     * This happens, when an item from the suggestion list is selected or the
+     * input matches a selection option exactly.
+     * If no id is selected, the empty string is passed, in order to
+     * match the API of all other inputs who never pass `undefined`.
+     */
+    onUpdateValue: PropType<(newValue: string) => void>;
+    /**
+     * The options which are allowed and suggested for this input.
+     * The options are filtered based on the user input.
+     */
+    options: {
+        type: PropType<InputSelectOption[]>;
+        default: () => never[];
+    };
+    /**
+     * @see {@link nValInputProps.optional}
+     */
+    optional: BooleanConstructor;
+    /**
+     * @see {@link nValInputProps.form}
+     */
+    form: PropType<import("./ValidatedForm").ValidatedForm>;
+    /**
+     * @see {@link nValInputProps.error}
+     */
+    error: BooleanConstructor;
+    /**
+     * @see {@link nValInputProps.errorMessage}
+     */
+    errorMessage: StringConstructor;
+    /**
+     * If set to `true` the list is hidden even if there are still matching items in the list.
+     */
+    hideList: BooleanConstructor;
+    /**
+     * @see {@link nSuggestionListProps.maxItems}
+     */
+    maxItems: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    /**
+     * @see {@link nSuggestionListProps.listItem}
+     */
+    listItem: PropType<(props: import("./NSuggestionList").ItemSlotProps<import("./NSuggestionList").SuggestionItem>) => JSX.Element>;
+    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>;
+}>> & {}, {
+    small: boolean;
+    type: string;
+    tooltipHide: boolean;
+    tooltipShow: boolean;
+    tooltipPlacement: import("./NTooltip").TooltipPlacement;
+    tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
+    options: InputSelectOption[];
+    disabled: boolean;
+    error: boolean;
+    autocomplete: string;
+    hideLabel: boolean;
+    optional: boolean;
+    maxItems: number;
+    hideList: boolean;
+}>;
+export default _default;

package/lib/components/NInputSelect.jsx

@@ -0,0 +1,89 @@
+import { createComponent, createProps } from '../utils/component';
+import { Id } from '../utils/identifiable';
+import { option } from '../utils/validation';
+import { vModelForRef } from '../utils/vModel';
+import { watchRef } from '../utils/vue';
+import { computed, ref, watch } from 'vue';
+import { nInputProps } from './NInput';
+import NSuggestionList, { nSuggestionListProps } from './NSuggestionList';
+import NValInput, { nValInputProps } from './NValInput';
+export const nInputSelectProps = createProps({
+    ...nInputProps,
+    /**
+     * The id of the currently selected option of this input.
+     */
+    value: String,
+    /**
+     * This is called with the newly selected id when the selection has changed.
+     * This happens, when an item from the suggestion list is selected or the
+     * input matches a selection option exactly.
+     * If no id is selected, the empty string is passed, in order to
+     * match the API of all other inputs who never pass `undefined`.
+     */
+    onUpdateValue: Function,
+    /**
+     * The options which are allowed and suggested for this input.
+     * The options are filtered based on the user input.
+     */
+    options: {
+        type: Array,
+        default: () => [],
+    },
+    /**
+     * @see {@link nValInputProps.optional}
+     */
+    optional: nValInputProps.optional,
+    /**
+     * @see {@link nValInputProps.form}
+     */
+    form: nValInputProps.form,
+    /**
+     * @see {@link nValInputProps.error}
+     */
+    error: nValInputProps.error,
+    /**
+     * @see {@link nValInputProps.errorMessage}
+     */
+    errorMessage: nValInputProps.errorMessage,
+    /**
+     * If set to `true` the list is hidden even if there are still matching items in the list.
+     */
+    hideList: nSuggestionListProps.hideList,
+    /**
+     * @see {@link nSuggestionListProps.maxItems}
+     */
+    maxItems: nSuggestionListProps.maxItems,
+    /**
+     * @see {@link nSuggestionListProps.listItem}
+     */
+    listItem: nSuggestionListProps.listItem,
+});
+/**
+ * The `NInputSelect` is very similar to the {@link NSelect}, but instead of a select input it is a regular input.
+ * The user is forced to use a value from the specified options of the input.
+ * While they type, the list of options is shown to them and filtered based on their input.
+ */
+export default createComponent('NInputSelect', nInputSelectProps, props => {
+    const inputRef = ref();
+    const inputValue = ref('');
+    watch(() => props.value, newValue => {
+        if (newValue) {
+            const chosenOption = Id.find(props.options, newValue);
+            if (chosenOption)
+                inputValue.value = chosenOption.label;
+        }
+    }, { immediate: true });
+    const filteredOptions = computed(() => props.options.filter(option => option.label.includes(inputValue.value || '')));
+    const matchedOption = computed(() => {
+        const matches = props.options.filter(option => option.label === inputValue.value);
+        return matches.length > 0 ? matches[0] : null;
+    });
+    watchRef(matchedOption, newOption => props.onUpdateValue?.(newOption?.id || ''));
+    return () => (<NSuggestionList items={filteredOptions.value} onSelect={props.onUpdateValue} inputValue={inputValue.value} hideList={props.hideList || matchedOption.value != null || filteredOptions.value.length == 0} maxItems={props.maxItems} listItem={props.listItem} input={({ onFocus, onBlur }) => (<NValInput ref={inputRef} {...{ ...props, ...vModelForRef(inputValue) }} rules={option(props.options.map(opt => opt.label))} onFocus={() => {
+                onFocus();
+                props.onFocus?.();
+            }} onBlur={onBlur} disableBlurValidation/>)} onRequestInputFocus={() => inputRef.value?.focus()} onRealBlur={() => {
+            props.onBlur?.();
+            inputRef?.value?.validate();
+        }}/>);
+});

package/lib/components/NInputSuggestion.d.ts

@@ -0,0 +1,212 @@
+import { type PropType } from 'vue';
+export declare const nInputSuggestionProps: {
+    /**
+     * If set to `true` the list is hidden even if there are still matching items in the list.
+     */
+    hideList: BooleanConstructor;
+    /**
+     * @see {@link nSuggestionListProps.maxItems}
+     */
+    maxItems: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    /**
+     * The suggestions which are shown to the user for this input.
+     * The suggestions are filtered based on the user input.
+     */
+    suggestions: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    input: PropType<(props: import("./NValInput").InputSlotProps) => JSX.Element>;
+    optional: BooleanConstructor;
+    rules: {
+        type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
+        default: () => never[];
+    };
+    form: PropType<import("./ValidatedForm").ValidatedForm>;
+    error: BooleanConstructor;
+    errorMessage: StringConstructor;
+    hideErrorMessage: BooleanConstructor;
+    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>;
+};
+/**
+ * `NInputSuggestion` is an input, which shows a list of possible suggestions to the user
+ *  which is filtered while typing. Contrary to {@link NInputSelect} the user is not required to choose any of the suggestions.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * If set to `true` the list is hidden even if there are still matching items in the list.
+     */
+    hideList: BooleanConstructor;
+    /**
+     * @see {@link nSuggestionListProps.maxItems}
+     */
+    maxItems: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    /**
+     * The suggestions which are shown to the user for this input.
+     * The suggestions are filtered based on the user input.
+     */
+    suggestions: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    input: PropType<(props: import("./NValInput").InputSlotProps) => JSX.Element>;
+    optional: BooleanConstructor;
+    rules: {
+        type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
+        default: () => never[];
+    };
+    form: PropType<import("./ValidatedForm").ValidatedForm>;
+    error: BooleanConstructor;
+    errorMessage: StringConstructor;
+    hideErrorMessage: BooleanConstructor;
+    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<{
+    /**
+     * If set to `true` the list is hidden even if there are still matching items in the list.
+     */
+    hideList: BooleanConstructor;
+    /**
+     * @see {@link nSuggestionListProps.maxItems}
+     */
+    maxItems: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    /**
+     * The suggestions which are shown to the user for this input.
+     * The suggestions are filtered based on the user input.
+     */
+    suggestions: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    input: PropType<(props: import("./NValInput").InputSlotProps) => JSX.Element>;
+    optional: BooleanConstructor;
+    rules: {
+        type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
+        default: () => never[];
+    };
+    form: PropType<import("./ValidatedForm").ValidatedForm>;
+    error: BooleanConstructor;
+    errorMessage: StringConstructor;
+    hideErrorMessage: BooleanConstructor;
+    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: import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[];
+    autocomplete: string;
+    hideLabel: boolean;
+    optional: boolean;
+    hideErrorMessage: boolean;
+    disableBlurValidation: boolean;
+    maxItems: number;
+    hideList: boolean;
+    suggestions: string[];
+}>;
+export default _default;

package/lib/components/NInputSuggestion.jsx

@@ -0,0 +1,48 @@
+import { createComponent, createProps } from '../utils/component';
+import { Id } from '../utils/identifiable';
+import { computed, ref } from 'vue';
+import NSuggestionList, { nSuggestionListProps } from './NSuggestionList';
+import NValInput, { nValInputProps } from './NValInput';
+export const nInputSuggestionProps = createProps({
+    ...nValInputProps,
+    /**
+     * If set to `true` the list is hidden even if there are still matching items in the list.
+     */
+    hideList: nSuggestionListProps.hideList,
+    /**
+     * @see {@link nSuggestionListProps.maxItems}
+     */
+    maxItems: nSuggestionListProps.maxItems,
+    /**
+     * The suggestions which are shown to the user for this input.
+     * The suggestions are filtered based on the user input.
+     */
+    suggestions: {
+        type: Array,
+        default: () => [],
+    },
+});
+/**
+ * `NInputSuggestion` is an input, which shows a list of possible suggestions to the user
+ *  which is filtered while typing. Contrary to {@link NInputSelect} the user is not required to choose any of the suggestions.
+ */
+export default createComponent('NInputSuggestion', nInputSuggestionProps, props => {
+    const suggestionItems = computed(() => props.suggestions
+        .filter(suggestion => suggestion.includes(props.value || ''))
+        .map((value, index) => ({
+        id: index.toString(),
+        label: value,
+    })));
+    const select = (id) => props.onUpdateValue?.(Id.find(suggestionItems.value, id)?.label || '');
+    const hideList = computed(() => props.hideList ||
+        suggestionItems.value.length == 0 ||
+        suggestionItems.value.filter(suggestion => suggestion.label !== props.value).length == 0);
+    const inputRef = ref();
+    return () => (<NSuggestionList items={suggestionItems.value} onSelect={id => select(id)} inputValue={props.value || ''} hideList={hideList.value} maxItems={props.maxItems} input={({ onFocus, onBlur }) => (<NValInput ref={inputRef} {...props} onFocus={() => {
+                onFocus();
+                props.onFocus?.();
+            }} onBlur={onBlur} disableBlurValidation/>)} onRequestInputFocus={() => inputRef.value?.focus()} onRealBlur={() => {
+            props.onBlur?.();
+            inputRef?.value?.validate();
+        }}/>);
+});