@naptics/vue-collection 0.0.1

package/lib/components/NPagination.jsx

@@ -0,0 +1,104 @@
+import { createComponent, createProps } from '../utils/component';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/solid';
+import { computed, watch } from 'vue';
+import './NPagination.css';
+export const nPaginationProps = createProps({
+    /**
+     * The page number which is currently selected.
+     */
+    value: {
+        type: Number,
+        default: () => 1,
+    },
+    /**
+     * This is called, when a new page number has been selected.
+     */
+    onUpdateValue: Function,
+    /**
+     * The total pages which exists. This is needed to correctly display the selectable pages.
+     */
+    total: {
+        type: Number,
+        default: () => 1,
+    },
+    /**
+     * If set to `true`, the pagination is displayed smaller.
+     */
+    small: Boolean,
+    /**
+     * This is called, when the visible pages, which are selectable in the pagination, have changed.
+     * This is useful as only these pages can be navigated to on the next click.
+     * This information can be useful for prefetching.
+     */
+    onVisiblePagesChanged: Function,
+});
+/**
+ * The `NPagination` is a styled pagination component.
+ */
+export default createComponent('NPagination', nPaginationProps, props => {
+    const numbers = computed(() => {
+        if (props.total <= 7) {
+            return range(1, props.total);
+        }
+        else if (props.value <= 4) {
+            return [...range(1, 5), -1, props.total];
+        }
+        else if (props.value >= props.total - 3) {
+            return [1, -1, ...range(props.total - 4, props.total)];
+        }
+        else {
+            return [1, -1, ...range(props.value - 1, props.value + 1), -1, props.total];
+        }
+    });
+    watch(() => numbers.value, () => {
+        const visiblePages = numbers.value.filter(value => value != -1);
+        props.onVisiblePagesChanged?.(visiblePages);
+    }, { immediate: true });
+    const clickedNumber = (value) => {
+        if (value <= props.total && value >= 1)
+            props.onUpdateValue?.(value);
+    };
+    const next = () => clickedNumber(props.value + 1);
+    const previous = () => clickedNumber(props.value - 1);
+    const items = computed(() => numbers.value.map(number => {
+        if (number == -1)
+            return { label: '...', selectable: false, selected: false };
+        else
+            return {
+                label: `${number}`,
+                selectable: true,
+                selected: number == props.value,
+                click: () => clickedNumber(number),
+            };
+    }));
+    const classesForItem = (item) => [
+        'pagination-item',
+        item.selectable ? 'selectable ' : '',
+        item.selected ? 'selected' : '',
+        props.small ? '' : 'not-small',
+    ];
+    return () => (<nav class="inline-flex rounded-md shadow -space-x-px">
+            <button class={['pagination-item selectable rounded-l-md', props.small ? '' : 'not-small']} onClick={previous}>
+                <span class="sr-only">Previous</span>
+                <ChevronLeftIcon class="h-5 w-5" aria-hidden="true"/>
+            </button>
+
+            {items.value.map((item, index) => item.selectable ? (<button key={index} class={classesForItem(item)} onClick={item.click}>
+                        {item.label}
+                    </button>) : (<div key={index} class={classesForItem(item)}>
+                        {item.label}
+                    </div>))}
+
+            <button class={['pagination-item selectable rounded-r-md', props.small ? '' : 'not-small']} onClick={next}>
+                <span class="sr-only">Next</span>
+                <ChevronRightIcon class="h-5 w-5" aria-hidden="true"/>
+            </button>
+        </nav>);
+});
+function range(from, to) {
+    const array = [];
+    for (let i = from; i <= to; i++) {
+        array.push(i);
+    }
+    return array;
+}

package/lib/components/NSearchbar.d.ts

@@ -0,0 +1,94 @@
+import { type PropType } from 'vue';
+export declare const nSearchbarProps: {
+    /**
+     * The placeholder of the search-bar.
+     */
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * If set to `true` the search-bar is displayed smaller.
+     */
+    small: BooleanConstructor;
+    /**
+     * The classes are directly added to the input (e.g. for shadow).
+     */
+    inputClass: StringConstructor;
+    /**
+     * This is called when the search-bar receives focus.
+     */
+    onFocus: PropType<() => void>;
+    /**
+     * This is called when the search-bar looses focus.
+     */
+    onBlur: PropType<() => void>;
+    value: PropType<string>;
+    onUpdateValue: PropType<(newValue: string) => void>;
+};
+export type NSearchbarExposed = {
+    /**
+     * Request focus on the search-bar.
+     */
+    focus(): void;
+};
+/**
+ * The `NSearchbar` is a styled input with a search icon.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The placeholder of the search-bar.
+     */
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * If set to `true` the search-bar is displayed smaller.
+     */
+    small: BooleanConstructor;
+    /**
+     * The classes are directly added to the input (e.g. for shadow).
+     */
+    inputClass: StringConstructor;
+    /**
+     * This is called when the search-bar receives focus.
+     */
+    onFocus: PropType<() => void>;
+    /**
+     * This is called when the search-bar 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<{
+    /**
+     * The placeholder of the search-bar.
+     */
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * If set to `true` the search-bar is displayed smaller.
+     */
+    small: BooleanConstructor;
+    /**
+     * The classes are directly added to the input (e.g. for shadow).
+     */
+    inputClass: StringConstructor;
+    /**
+     * This is called when the search-bar receives focus.
+     */
+    onFocus: PropType<() => void>;
+    /**
+     * This is called when the search-bar looses focus.
+     */
+    onBlur: PropType<() => void>;
+    value: PropType<string>;
+    onUpdateValue: PropType<(newValue: string) => void>;
+}>> & {}, {
+    small: boolean;
+    placeholder: string;
+}>;
+export default _default;

package/lib/components/NSearchbar.jsx

@@ -0,0 +1,58 @@
+import { trsl } from '../i18n';
+import { createComponent, createProps } from '../utils/component';
+import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid';
+import { ref } from 'vue';
+import { vModelProps } from '../utils/vModel';
+export const nSearchbarProps = createProps({
+    ...vModelProps(String),
+    /**
+     * The placeholder of the search-bar.
+     */
+    placeholder: {
+        type: String,
+        default: trsl('vue-collection.action.search'),
+    },
+    /**
+     * If set to `true` the search-bar is displayed smaller.
+     */
+    small: Boolean,
+    /**
+     * The classes are directly added to the input (e.g. for shadow).
+     */
+    inputClass: String,
+    /**
+     * This is called when the search-bar receives focus.
+     */
+    onFocus: Function,
+    /**
+     * This is called when the search-bar looses focus.
+     */
+    onBlur: Function,
+});
+/**
+ * The `NSearchbar` is a styled input with a search icon.
+ */
+export default createComponent('NSearchbar', nSearchbarProps, (props, context) => {
+    const inputRef = ref();
+    const exposed = {
+        focus: () => {
+            inputRef.value?.focus();
+        },
+    };
+    context.expose(exposed);
+    return () => (<div>
+            <label for="search" class="sr-only">
+                {props.placeholder}
+            </label>
+            <div class="relative">
+                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <MagnifyingGlassIcon class="h-5 w-5 text-default-400" aria-hidden="true"/>
+                </div>
+                <input ref={inputRef} value={props.value} onInput={event => props.onUpdateValue?.(event.target.value)} type="text" name="search" placeholder={props.placeholder} autocomplete="off" class={[
+            'block w-full pl-10 pr-4 rounded-md border focus:outline-none focus:ring-1 transition placeholder-default-400 border-default-300 focus:border-primary-500 focus:ring-primary-500',
+            props.small ? 'py-1' : 'py-2',
+            props.inputClass,
+        ]} onFocus={props.onFocus} onBlur={props.onBlur}/>
+            </div>
+        </div>);
+});

package/lib/components/NSearchbarList.d.ts

@@ -0,0 +1,90 @@
+export declare const nSearchbarListProps: {
+    /**
+     * @see {@link nSearchbarProps.placeholder}
+     */
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    value: import("vue").PropType<string>;
+    onUpdateValue: import("vue").PropType<(newValue: string) => void>;
+    items: {
+        type: import("vue").PropType<import("./NSuggestionList").SuggestionItem[]>;
+        default: () => never[];
+    };
+    /**
+     * The `NSearchbarList` is a {@link NSearchbar} with a {@link NSuggestionList}.
+     */
+    maxItems: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    hideList: BooleanConstructor;
+    loading: BooleanConstructor;
+    onSelect: import("vue").PropType<(id: string) => void>;
+    listItem: import("vue").PropType<(props: import("./NSuggestionList").ItemSlotProps<import("./NSuggestionList").SuggestionItem>) => JSX.Element>;
+    onRealBlur: import("vue").PropType<() => void>;
+};
+/**
+ * The `NSearchbarList` is a {@link NSearchbar} with a {@link NSuggestionList}.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * @see {@link nSearchbarProps.placeholder}
+     */
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    value: import("vue").PropType<string>;
+    onUpdateValue: import("vue").PropType<(newValue: string) => void>;
+    items: {
+        type: import("vue").PropType<import("./NSuggestionList").SuggestionItem[]>;
+        default: () => never[];
+    };
+    /**
+     * The `NSearchbarList` is a {@link NSearchbar} with a {@link NSuggestionList}.
+     */
+    maxItems: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    hideList: BooleanConstructor;
+    loading: BooleanConstructor;
+    onSelect: import("vue").PropType<(id: string) => void>;
+    listItem: import("vue").PropType<(props: import("./NSuggestionList").ItemSlotProps<import("./NSuggestionList").SuggestionItem>) => JSX.Element>;
+    onRealBlur: import("vue").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<{
+    /**
+     * @see {@link nSearchbarProps.placeholder}
+     */
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    value: import("vue").PropType<string>;
+    onUpdateValue: import("vue").PropType<(newValue: string) => void>;
+    items: {
+        type: import("vue").PropType<import("./NSuggestionList").SuggestionItem[]>;
+        default: () => never[];
+    };
+    /**
+     * The `NSearchbarList` is a {@link NSearchbar} with a {@link NSuggestionList}.
+     */
+    maxItems: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    hideList: BooleanConstructor;
+    loading: BooleanConstructor;
+    onSelect: import("vue").PropType<(id: string) => void>;
+    listItem: import("vue").PropType<(props: import("./NSuggestionList").ItemSlotProps<import("./NSuggestionList").SuggestionItem>) => JSX.Element>;
+    onRealBlur: import("vue").PropType<() => void>;
+}>> & {}, {
+    loading: boolean;
+    items: import("./NSuggestionList").SuggestionItem[];
+    placeholder: string;
+    maxItems: number;
+    hideList: boolean;
+}>;
+export default _default;

package/lib/components/NSearchbarList.jsx

@@ -0,0 +1,20 @@
+import { createComponent, createProps } from '../utils/component';
+import { ref } from 'vue';
+import { vModelProps } from '../utils/vModel';
+import NSearchbar, { nSearchbarProps } from './NSearchbar';
+import NSuggestionList, { nSuggestionListPropsForConfig } from './NSuggestionList';
+export const nSearchbarListProps = createProps({
+    ...nSuggestionListPropsForConfig,
+    ...vModelProps(String),
+    /**
+     * @see {@link nSearchbarProps.placeholder}
+     */
+    placeholder: nSearchbarProps.placeholder,
+});
+/**
+ * The `NSearchbarList` is a {@link NSearchbar} with a {@link NSuggestionList}.
+ */
+export default createComponent('NSearchbarList', nSearchbarListProps, props => {
+    const searchbarRef = ref();
+    return () => (<NSuggestionList {...props} inputValue={props.value || ''} input={({ onFocus, onBlur }) => (<NSearchbar ref={searchbarRef} value={props.value} onUpdateValue={props.onUpdateValue} placeholder={props.placeholder} inputClass="shadow-lg" onFocus={onFocus} onBlur={onBlur}/>)} onRequestInputFocus={() => searchbarRef.value?.focus()}/>);
+});

package/lib/components/NSelect.d.ts

@@ -0,0 +1,159 @@
+import type { Identifiable } from '../utils/identifiable';
+import { type PropType } from 'vue';
+import { type NValInputExposed } from './NValInput';
+export declare const nSelectProps: {
+    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 id of the currently selected option of this input.
+     */
+    value: StringConstructor;
+    /**
+     * This is called with the newly selected id when the selection has changed.
+     * 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 different options which can be selected.
+     */
+    options: {
+        type: PropType<SelectionOption[]>;
+        default: () => never[];
+    };
+    /**
+     * @see {@link nValInputProps.name}
+     */
+    name: StringConstructor;
+    /**
+     * @see {@link nValInputProps.optional}
+     */
+    optional: BooleanConstructor;
+    /**
+     * @see {@link nValInputProps.disabled}
+     */
+    disabled: BooleanConstructor;
+    /**
+     * @see {@link nValInputProps.form}
+     */
+    form: PropType<import("./ValidatedForm").ValidatedForm>;
+};
+export type SelectionOption = Identifiable & {
+    label: string;
+};
+export type NSelectExposed = NValInputExposed;
+/**
+ * The `NSelect` is a styled html select-input.
+ */
+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 id of the currently selected option of this input.
+     */
+    value: StringConstructor;
+    /**
+     * This is called with the newly selected id when the selection has changed.
+     * 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 different options which can be selected.
+     */
+    options: {
+        type: PropType<SelectionOption[]>;
+        default: () => never[];
+    };
+    /**
+     * @see {@link nValInputProps.name}
+     */
+    name: StringConstructor;
+    /**
+     * @see {@link nValInputProps.optional}
+     */
+    optional: BooleanConstructor;
+    /**
+     * @see {@link nValInputProps.disabled}
+     */
+    disabled: BooleanConstructor;
+    /**
+     * @see {@link nValInputProps.form}
+     */
+    form: PropType<import("./ValidatedForm").ValidatedForm>;
+}, 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 id of the currently selected option of this input.
+     */
+    value: StringConstructor;
+    /**
+     * This is called with the newly selected id when the selection has changed.
+     * 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 different options which can be selected.
+     */
+    options: {
+        type: PropType<SelectionOption[]>;
+        default: () => never[];
+    };
+    /**
+     * @see {@link nValInputProps.name}
+     */
+    name: StringConstructor;
+    /**
+     * @see {@link nValInputProps.optional}
+     */
+    optional: BooleanConstructor;
+    /**
+     * @see {@link nValInputProps.disabled}
+     */
+    disabled: BooleanConstructor;
+    /**
+     * @see {@link nValInputProps.form}
+     */
+    form: PropType<import("./ValidatedForm").ValidatedForm>;
+}>> & {}, {
+    tooltipHide: boolean;
+    tooltipShow: boolean;
+    tooltipPlacement: import("./NTooltip").TooltipPlacement;
+    tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
+    options: SelectionOption[];
+    disabled: boolean;
+    optional: boolean;
+}>;
+export default _default;

package/lib/components/NSelect.jsx

@@ -0,0 +1,81 @@
+import { trsl } from '../i18n';
+import { createComponent, createProps } from '../utils/component';
+import { ref } from 'vue';
+import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip';
+import NValInput, { nValInputProps } from './NValInput';
+export const nSelectProps = createProps({
+    /**
+     * 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.
+     * 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 different options which can be selected.
+     */
+    options: {
+        type: Array,
+        default: () => [],
+    },
+    /**
+     * @see {@link nValInputProps.name}
+     */
+    name: nValInputProps.name,
+    /**
+     * @see {@link nValInputProps.optional}
+     */
+    optional: nValInputProps.optional,
+    /**
+     * @see {@link nValInputProps.disabled}
+     */
+    disabled: nValInputProps.disabled,
+    /**
+     * @see {@link nValInputProps.form}
+     */
+    form: nValInputProps.form,
+    ...nToolTipPropsForImplementor,
+});
+/**
+ * The `NSelect` is a styled html select-input.
+ */
+export default createComponent('NSelect', nSelectProps, (props, context) => {
+    const inputRef = ref();
+    const exposed = {
+        focus: () => inputRef.value?.focus(),
+        validate: () => {
+            if (inputRef.value == null)
+                throw new Error('Can not validate NSelect as its input was undefined');
+            return inputRef.value.validate();
+        },
+        reset: () => inputRef.value?.reset(),
+    };
+    context.expose(exposed);
+    return () => (<NValInput ref={inputRef} {...props} input={slotProps => (<>
+                    <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)}>
+                        <select name={props.name} disabled={props.disabled} value={props.value} onChange={event => slotProps.onUpdateValue(event.target.value)} onBlur={slotProps.onBlur} class={[
+                'block w-full py-2 pl-4 pr-10 rounded-md border focus:outline-none focus:ring-1',
+                props.disabled ? 'text-default-300 ' : 'text-default-900 ',
+                slotProps.error
+                    ? 'border-red-500 focus:border-red-500 focus:ring-red-500'
+                    : 'border-default-300 focus:border-primary-500 focus:ring-primary-500',
+            ]}>
+                            <option disabled={!props.optional} selected={!props.value} value="">
+                                {trsl('vue-collection.action.select')}
+                            </option>
+                            {props.options.map(option => (<option key={option.id} value={option.id} selected={props.value == option.id}>
+                                    {option.label}
+                                </option>))}
+                        </select>
+                    </NTooltip>
+                </>)}/>);
+});