@naptics/vue-collection 0.0.1

package/lib/components/NSuggestionList.d.ts

@@ -0,0 +1,275 @@
+import type { Identifiable } from '../utils/identifiable';
+import { type PropType } from 'vue';
+export declare const nSuggestionListPropsForConfig: {
+    /**
+     * The items which are available to show in the list. The first `maxItems` will be displayed.
+     */
+    items: {
+        type: PropType<SuggestionItem[]>;
+        default: () => never[];
+    };
+    /**
+     * The maximum items which are displayed in the list.
+     */
+    maxItems: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    /**
+     * If set to `true` the list is hidden.
+     */
+    hideList: BooleanConstructor;
+    /**
+     * If set to `true` the list shows a loading indicator when the `items` array is empty.
+     */
+    loading: BooleanConstructor;
+    /**
+     * This is called with the id of the selected item.
+     */
+    onSelect: PropType<(id: string) => void>;
+    /**
+     * The slot for every item of the list.
+     */
+    listItem: PropType<(props: ItemSlotProps) => JSX.Element>;
+    /**
+     * This function is called, when the input and the suggestion list are really blurred.
+     * This means, it's not just the input temporarly beeing blurred because the user clicks on the item list,
+     * but the focus has completely disappeared from the input and the list.
+     */
+    onRealBlur: PropType<() => void>;
+};
+export declare const nSuggestionListPropsForInput: {
+    /**
+     * The slot for the input, which will be enhanced with the suggestion list.
+     */
+    input: {
+        type: PropType<(props: InputSlotProps) => JSX.Element>;
+        required: true;
+    };
+    /**
+     * When this function is called, the parent is required to call focus() on the input element.
+     * It won't work properly if the parent does not request focus on the input.
+     */
+    onRequestInputFocus: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    /**
+     * The current value of the input. This is just needed to display the «No results found for {value}» message.
+     */
+    inputValue: {
+        type: StringConstructor;
+        required: true;
+    };
+};
+export declare const nSuggestionListProps: {
+    /**
+     * The slot for the input, which will be enhanced with the suggestion list.
+     */
+    input: {
+        type: PropType<(props: InputSlotProps) => JSX.Element>;
+        required: true;
+    };
+    /**
+     * When this function is called, the parent is required to call focus() on the input element.
+     * It won't work properly if the parent does not request focus on the input.
+     */
+    onRequestInputFocus: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    /**
+     * The current value of the input. This is just needed to display the «No results found for {value}» message.
+     */
+    inputValue: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The items which are available to show in the list. The first `maxItems` will be displayed.
+     */
+    items: {
+        type: PropType<SuggestionItem[]>;
+        default: () => never[];
+    };
+    /**
+     * The maximum items which are displayed in the list.
+     */
+    maxItems: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    /**
+     * If set to `true` the list is hidden.
+     */
+    hideList: BooleanConstructor;
+    /**
+     * If set to `true` the list shows a loading indicator when the `items` array is empty.
+     */
+    loading: BooleanConstructor;
+    /**
+     * This is called with the id of the selected item.
+     */
+    onSelect: PropType<(id: string) => void>;
+    /**
+     * The slot for every item of the list.
+     */
+    listItem: PropType<(props: ItemSlotProps) => JSX.Element>;
+    /**
+     * This function is called, when the input and the suggestion list are really blurred.
+     * This means, it's not just the input temporarly beeing blurred because the user clicks on the item list,
+     * but the focus has completely disappeared from the input and the list.
+     */
+    onRealBlur: PropType<() => void>;
+};
+export type InputSlotProps = {
+    /**
+     * Should be called when the input receives focus.
+     */
+    onFocus(): void;
+    /**
+     * Should be called when the input is blurred.
+     */
+    onBlur(): void;
+};
+export type ItemSlotProps<T extends Identifiable = SuggestionItem> = {
+    /**
+     * The current item of the list
+     */
+    item: T;
+    /**
+     * Is true, when the current item is highlighted ("hovered" with the keys)
+     */
+    highlighted: boolean;
+};
+export type SuggestionItem = Identifiable & {
+    label?: string;
+} & Record<string, unknown>;
+/**
+ * The `NSuggestionList` can be added to an input and adds a list below it which is shown when the input is focused.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The slot for the input, which will be enhanced with the suggestion list.
+     */
+    input: {
+        type: PropType<(props: InputSlotProps) => JSX.Element>;
+        required: true;
+    };
+    /**
+     * When this function is called, the parent is required to call focus() on the input element.
+     * It won't work properly if the parent does not request focus on the input.
+     */
+    onRequestInputFocus: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    /**
+     * The current value of the input. This is just needed to display the «No results found for {value}» message.
+     */
+    inputValue: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The items which are available to show in the list. The first `maxItems` will be displayed.
+     */
+    items: {
+        type: PropType<SuggestionItem[]>;
+        default: () => never[];
+    };
+    /**
+     * The maximum items which are displayed in the list.
+     */
+    maxItems: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    /**
+     * If set to `true` the list is hidden.
+     */
+    hideList: BooleanConstructor;
+    /**
+     * If set to `true` the list shows a loading indicator when the `items` array is empty.
+     */
+    loading: BooleanConstructor;
+    /**
+     * This is called with the id of the selected item.
+     */
+    onSelect: PropType<(id: string) => void>;
+    /**
+     * The slot for every item of the list.
+     */
+    listItem: PropType<(props: ItemSlotProps<SuggestionItem>) => JSX.Element>;
+    /**
+     * This function is called, when the input and the suggestion list are really blurred.
+     * This means, it's not just the input temporarly beeing blurred because the user clicks on the item list,
+     * but the focus has completely disappeared from the input and the list.
+     */
+    onRealBlur: 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 slot for the input, which will be enhanced with the suggestion list.
+     */
+    input: {
+        type: PropType<(props: InputSlotProps) => JSX.Element>;
+        required: true;
+    };
+    /**
+     * When this function is called, the parent is required to call focus() on the input element.
+     * It won't work properly if the parent does not request focus on the input.
+     */
+    onRequestInputFocus: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    /**
+     * The current value of the input. This is just needed to display the «No results found for {value}» message.
+     */
+    inputValue: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The items which are available to show in the list. The first `maxItems` will be displayed.
+     */
+    items: {
+        type: PropType<SuggestionItem[]>;
+        default: () => never[];
+    };
+    /**
+     * The maximum items which are displayed in the list.
+     */
+    maxItems: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    /**
+     * If set to `true` the list is hidden.
+     */
+    hideList: BooleanConstructor;
+    /**
+     * If set to `true` the list shows a loading indicator when the `items` array is empty.
+     */
+    loading: BooleanConstructor;
+    /**
+     * This is called with the id of the selected item.
+     */
+    onSelect: PropType<(id: string) => void>;
+    /**
+     * The slot for every item of the list.
+     */
+    listItem: PropType<(props: ItemSlotProps<SuggestionItem>) => JSX.Element>;
+    /**
+     * This function is called, when the input and the suggestion list are really blurred.
+     * This means, it's not just the input temporarly beeing blurred because the user clicks on the item list,
+     * but the focus has completely disappeared from the input and the list.
+     */
+    onRealBlur: PropType<() => void>;
+}>> & {}, {
+    loading: boolean;
+    items: SuggestionItem[];
+    maxItems: number;
+    hideList: boolean;
+}>;
+export default _default;

package/lib/components/NSuggestionList.jsx

@@ -0,0 +1,157 @@
+import { trsl } from '../i18n';
+import { createComponent, createProps } from '../utils/component';
+import { computed, ref } from 'vue';
+import NLoadingIndicator from './NLoadingIndicator';
+export const nSuggestionListPropsForConfig = createProps({
+    /**
+     * The items which are available to show in the list. The first `maxItems` will be displayed.
+     */
+    items: {
+        type: Array,
+        default: () => [],
+    },
+    /**
+     * The maximum items which are displayed in the list.
+     */
+    maxItems: {
+        type: Number,
+        default: () => 8,
+    },
+    /**
+     * If set to `true` the list is hidden.
+     */
+    hideList: Boolean,
+    /**
+     * If set to `true` the list shows a loading indicator when the `items` array is empty.
+     */
+    loading: Boolean,
+    /**
+     * This is called with the id of the selected item.
+     */
+    onSelect: Function,
+    /**
+     * The slot for every item of the list.
+     */
+    listItem: Function,
+    /**
+     * This function is called, when the input and the suggestion list are really blurred.
+     * This means, it's not just the input temporarly beeing blurred because the user clicks on the item list,
+     * but the focus has completely disappeared from the input and the list.
+     */
+    onRealBlur: Function,
+});
+export const nSuggestionListPropsForInput = createProps({
+    /**
+     * The slot for the input, which will be enhanced with the suggestion list.
+     */
+    input: {
+        type: Function,
+        required: true,
+    },
+    /**
+     * When this function is called, the parent is required to call focus() on the input element.
+     * It won't work properly if the parent does not request focus on the input.
+     */
+    onRequestInputFocus: {
+        type: Function,
+        required: true,
+    },
+    /**
+     * The current value of the input. This is just needed to display the «No results found for {value}» message.
+     */
+    inputValue: {
+        type: String,
+        required: true,
+    },
+});
+export const nSuggestionListProps = createProps({
+    ...nSuggestionListPropsForConfig,
+    ...nSuggestionListPropsForInput,
+});
+/**
+ * The `NSuggestionList` can be added to an input and adds a list below it which is shown when the input is focused.
+ */
+export default createComponent('NSuggestionList', nSuggestionListProps, props => {
+    const selectedIndex = ref(null);
+    const displayItems = computed(() => props.items.slice(0, props.maxItems));
+    const isInFocus = ref(false);
+    const showList = computed(() => isInFocus.value && !props.hideList);
+    let listButtonClicked = false;
+    const onFocus = () => (isInFocus.value = true);
+    const onListMouseDown = () => (listButtonClicked = true);
+    const onListMouseLeave = () => props.onRequestInputFocus();
+    const onBlur = () => {
+        if (!listButtonClicked) {
+            isInFocus.value = false;
+            props.onRealBlur?.();
+        }
+        listButtonClicked = false;
+    };
+    const onSelect = (id) => {
+        props.onSelect?.(id);
+        props.onRequestInputFocus();
+    };
+    const keydown = (event) => {
+        if (event.key == 'ArrowDown') {
+            event.preventDefault();
+            nextItem();
+        }
+        else if (event.key == 'ArrowUp') {
+            event.preventDefault();
+            previoiusItem();
+        }
+        else if (event.key == 'Enter') {
+            event.preventDefault();
+            const index = selectedIndex.value;
+            if (index != null && index < displayItems.value.length) {
+                onSelect(displayItems.value[index].id);
+            }
+        }
+    };
+    const nextItem = () => {
+        adjustIndexToSize();
+        const currentIndex = selectedIndex.value;
+        let nextIndex = currentIndex == null ? 0 : currentIndex + 1;
+        if (nextIndex >= displayItems.value.length)
+            nextIndex = null;
+        selectedIndex.value = nextIndex;
+    };
+    const previoiusItem = () => {
+        adjustIndexToSize();
+        const currentIndex = selectedIndex.value;
+        let previousIndex = currentIndex == null ? displayItems.value.length - 1 : currentIndex - 1;
+        if (previousIndex < 0)
+            previousIndex = null;
+        selectedIndex.value = previousIndex;
+    };
+    const adjustIndexToSize = () => {
+        if (selectedIndex.value != null && selectedIndex.value >= displayItems.value.length) {
+            selectedIndex.value = null;
+        }
+    };
+    return () => (<div onKeydown={keydown}>
+            {props.input({ onFocus, onBlur })}
+            <div class="relative">
+                {showList.value && (<div class="bg-white rounded-md shadow-lg p-2 absolute top-2 left-0 min-w-full z-10">
+                        <ul>
+                            {displayItems.value.map((item, index) => (<li key={item.id} class={[
+                    'focus:outline-none hover:bg-default-50 rounded-md select-none p-2 cursor-pointer',
+                    selectedIndex.value === index ? 'bg-default-50' : '',
+                ]} onMousedown={onListMouseDown} onMouseleave={onListMouseLeave} onClick={() => onSelect(item.id)}>
+                                    {props.listItem?.({ item, highlighted: selectedIndex.value === index }) ||
+                    item.label}
+                                </li>))}
+
+                            {displayItems.value.length == 0 && (<div class="p-2 text-sm font-medium text-default-700">
+                                    {props.loading ? (<div class="flex items-center space-x-2">
+                                            <NLoadingIndicator size={6}/>
+                                            <span> {trsl('vue-collection.text.loading-search-results')}</span>
+                                        </div>) : (<div>
+                                            {trsl('vue-collection.text.no-search-results', { input: props.inputValue })}
+                                        </div>)}
+                                </div>)}
+                        </ul>
+                    </div>)}
+            </div>
+        </div>);
+});

package/lib/components/NTable.css

@@ -0,0 +1,3 @@
+.table-heading {
+    @apply text-left text-xs font-medium text-default-500 uppercase tracking-wider;
+}

package/lib/components/NTable.d.ts

@@ -0,0 +1,187 @@
+import { type TWBreakpoint } from '../utils/breakpoints';
+import { type PropType } from 'vue';
+import './NTable.css';
+export type TableHeading = {
+    /**
+     * The key of the table heading. This should match the key of the items.
+     */
+    key: string;
+    /**
+     * The label of the table heading. If not set, no label is displayed.
+     */
+    label?: string;
+    /**
+     * If set to `true` the whole column of this heading will be emphasized.
+     */
+    emph?: boolean;
+    /**
+     * This classes will be directly set to all cells in the column of this heading.
+     */
+    cellClass?: string;
+    /**
+     * If set the heading will become a details entry when the screen is smaller than the specified breakpoint.
+     */
+    breakpoint?: TWBreakpoint;
+};
+export type TableDetail = {
+    /**
+     * The key of the table details. This should match the key of the items.
+     */
+    key: string;
+    /**
+     * The label of the table detail. If not set, no label is displayed.
+     */
+    label?: string;
+};
+export type TableRow = Record<string, TableItem> & {
+    /**
+     * The TableItem is used as the last element of the table and
+     * merged together in one cell with the button to toggle the details.
+     */
+    action?: TableItem;
+};
+export type TableItem = string | number | (() => JSX.Element);
+export declare const nTableProps: {
+    /**
+     * The headings of the table. These define which columns are shown in the table and in which order.
+     */
+    headings: {
+        type: PropType<TableHeading[]>;
+        required: true;
+    };
+    /**
+     * Details can be added additionally to headings.
+     * If details are set a little chevron icon is displayed at the end of each table row
+     * and if clicked on it the data is displayed in a key-value fashion.
+     * The values of the entries should be passed via the `items` prop
+     * in the same way as if the details were normal headings.
+     * Note that details can be added dynamically by adding the `breakpoint` property to the headings.
+     */
+    details: {
+        type: PropType<TableDetail[]>;
+        default: () => never[];
+    };
+    /**
+     * The items of the table. They consist of an array of table rows.
+     * Every tablerow is an object containing elements for the heading keys.
+     * The elements can either be a primitive value or a function which returns a {@link JSX.Element}.
+     * If the item should be treated as an action (e.g. icon-button to display at the end of the row)
+     * the dedicated key 'action' can be used.
+     * @see TableRow
+     * @example
+     * // These headings are defined
+     * const headings: TableHeading[] = [
+     *    { key: 'id', label: 'ID' },
+     *    { key: 'name', label: 'Name' },
+     *    { key: 'status', label: 'Status' }
+     * ]
+     *
+     * // Appropriate rows for these headings
+     * const items: TableRow[] = [
+     *      { id: 1, name: 'Hubert', status: () => <NBadge ... />, action: ... },   // Row 1
+     *      { id: 2, name: 'Franzi', status: () => <NBadge ... />, action: ... }    // Row 2
+     * ]
+     */
+    items: {
+        type: PropType<TableRow[]>;
+        default: () => never[];
+    };
+};
+/**
+ * The `NTable` is a styled html table which accepts data and displays it appropriately.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The headings of the table. These define which columns are shown in the table and in which order.
+     */
+    headings: {
+        type: PropType<TableHeading[]>;
+        required: true;
+    };
+    /**
+     * Details can be added additionally to headings.
+     * If details are set a little chevron icon is displayed at the end of each table row
+     * and if clicked on it the data is displayed in a key-value fashion.
+     * The values of the entries should be passed via the `items` prop
+     * in the same way as if the details were normal headings.
+     * Note that details can be added dynamically by adding the `breakpoint` property to the headings.
+     */
+    details: {
+        type: PropType<TableDetail[]>;
+        default: () => never[];
+    };
+    /**
+     * The items of the table. They consist of an array of table rows.
+     * Every tablerow is an object containing elements for the heading keys.
+     * The elements can either be a primitive value or a function which returns a {@link JSX.Element}.
+     * If the item should be treated as an action (e.g. icon-button to display at the end of the row)
+     * the dedicated key 'action' can be used.
+     * @see TableRow
+     * @example
+     * // These headings are defined
+     * const headings: TableHeading[] = [
+     *    { key: 'id', label: 'ID' },
+     *    { key: 'name', label: 'Name' },
+     *    { key: 'status', label: 'Status' }
+     * ]
+     *
+     * // Appropriate rows for these headings
+     * const items: TableRow[] = [
+     *      { id: 1, name: 'Hubert', status: () => <NBadge ... />, action: ... },   // Row 1
+     *      { id: 2, name: 'Franzi', status: () => <NBadge ... />, action: ... }    // Row 2
+     * ]
+     */
+    items: {
+        type: PropType<TableRow[]>;
+        default: () => never[];
+    };
+}, 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 headings of the table. These define which columns are shown in the table and in which order.
+     */
+    headings: {
+        type: PropType<TableHeading[]>;
+        required: true;
+    };
+    /**
+     * Details can be added additionally to headings.
+     * If details are set a little chevron icon is displayed at the end of each table row
+     * and if clicked on it the data is displayed in a key-value fashion.
+     * The values of the entries should be passed via the `items` prop
+     * in the same way as if the details were normal headings.
+     * Note that details can be added dynamically by adding the `breakpoint` property to the headings.
+     */
+    details: {
+        type: PropType<TableDetail[]>;
+        default: () => never[];
+    };
+    /**
+     * The items of the table. They consist of an array of table rows.
+     * Every tablerow is an object containing elements for the heading keys.
+     * The elements can either be a primitive value or a function which returns a {@link JSX.Element}.
+     * If the item should be treated as an action (e.g. icon-button to display at the end of the row)
+     * the dedicated key 'action' can be used.
+     * @see TableRow
+     * @example
+     * // These headings are defined
+     * const headings: TableHeading[] = [
+     *    { key: 'id', label: 'ID' },
+     *    { key: 'name', label: 'Name' },
+     *    { key: 'status', label: 'Status' }
+     * ]
+     *
+     * // Appropriate rows for these headings
+     * const items: TableRow[] = [
+     *      { id: 1, name: 'Hubert', status: () => <NBadge ... />, action: ... },   // Row 1
+     *      { id: 2, name: 'Franzi', status: () => <NBadge ... />, action: ... }    // Row 2
+     * ]
+     */
+    items: {
+        type: PropType<TableRow[]>;
+        default: () => never[];
+    };
+}>> & {}, {
+    details: TableDetail[];
+    items: TableRow[];
+}>;
+export default _default;