@naptics/vue-collection 0.2.15 → 0.3.1

package/src/lib/components/NSelect.tsx

@@ -0,0 +1,128 @@
+import { trsl } from '../i18n'
+import { createComponent } from '../utils/component'
+import type { Identifiable } from '../utils/identifiable'
+import { ref, type PropType } from 'vue'
+import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip'
+import NValInput, { nValInputProps, type NValInputExposed } from './NValInput'
+
+export const nSelectProps = {
+    /**
+     * 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 as PropType<(newValue: string) => void>,
+    /**
+     * The different options which can be selected.
+     */
+    options: {
+        type: Array as PropType<SelectionOption[]>,
+        default: () => [],
+    },
+    /**
+     * The value which is shown in the empty state.
+     * The "nothing-option" will be called like this.
+     */
+    placeholder: {
+        type: String,
+        default: () => trsl('vue-collection.action.select'),
+    },
+    /**
+     * @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,
+    /**
+     * @see {@link nValInputProps.hideLabel}
+     */
+    hideLabel: nValInputProps.hideLabel,
+    /**
+     * @see {@link nValInputProps.inputClass}
+     */
+    inputClass: nValInputProps.inputClass,
+    ...nToolTipPropsForImplementor,
+} as const
+
+export type SelectionOption = Identifiable & { label: string }
+export type NSelectExposed = NValInputExposed
+
+/**
+ * The `NSelect` is a styled html select-input.
+ */
+const Component = createComponent('NSelect', nSelectProps, (props, context) => {
+    const inputRef = ref<NSelectExposed>()
+    const exposed: NSelectExposed = {
+        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 => (
+                <>
+                    {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)}>
+                        <select
+                            name={props.name}
+                            disabled={props.disabled}
+                            value={props.value}
+                            onChange={event => slotProps.onUpdateValue((event.target as HTMLInputElement).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',
+                                props.inputClass,
+                            ]}
+                        >
+                            <option disabled={!props.optional} selected={!props.value} value="">
+                                {props.placeholder}
+                            </option>
+                            {props.options.map(option => (
+                                <option key={option.id} value={option.id} selected={props.value == option.id}>
+                                    {option.label}
+                                </option>
+                            ))}
+                        </select>
+                    </NTooltip>
+                </>
+            )}
+        />
+    )
+})
+
+export { Component as NSelect, Component as default }

package/src/lib/components/NSuggestionList.tsx

@@ -0,0 +1,216 @@
+import { trsl } from '../i18n'
+import type { Identifiable } from '../utils/identifiable'
+import { createComponentWithSlots } from '../utils/component'
+import { computed, ref, type PropType } from 'vue'
+import NLoadingIndicator from './NLoadingIndicator'
+import type { AnyObject } from '../utils/utils'
+
+export const nSuggestionListPropsForConfig = {
+    /**
+     * The items which are available to show in the list. The first `maxItems` will be displayed.
+     */
+    items: {
+        type: Array as PropType<Array<SuggestionItem>>,
+        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 as PropType<(id: string) => void>,
+    /**
+     * The slot for every item of the list.
+     */
+    listItem: Function as 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: Function as PropType<() => void>,
+} as const
+
+export const nSuggestionListPropsForInput = {
+    /**
+     * The slot for the input, which will be enhanced with the suggestion list.
+     */
+    input: {
+        type: Function as 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: Function as 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: String,
+        required: true,
+    },
+} as const
+
+export const nSuggestionListProps = {
+    ...nSuggestionListPropsForConfig,
+    ...nSuggestionListPropsForInput,
+} as const
+
+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 } & AnyObject
+
+/**
+ * The `NSuggestionList` can be added to an input and adds a list below it which is shown when the input is focused.
+ */
+const Component = createComponentWithSlots('NSuggestionList', nSuggestionListProps, ['input', 'listItem'], props => {
+    const selectedIndex = ref<number | null>(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: string) => {
+        props.onSelect?.(id)
+        props.onRequestInputFocus()
+    }
+
+    const keydown = (event: KeyboardEvent) => {
+        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) {
+                const item = displayItems.value[index]
+                if (item) {
+                    onSelect(item.id)
+                }
+            }
+        }
+    }
+
+    const nextItem = () => {
+        adjustIndexToSize()
+        const currentIndex = selectedIndex.value
+        let nextIndex: number | null = currentIndex == null ? 0 : currentIndex + 1
+        if (nextIndex >= displayItems.value.length) nextIndex = null
+        selectedIndex.value = nextIndex
+    }
+
+    const previoiusItem = () => {
+        adjustIndexToSize()
+        const currentIndex = selectedIndex.value
+        let previousIndex: number | null = 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>
+    )
+})
+
+export { Component as NSuggestionList, Component as default }

package/src/lib/components/NTable.css

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

package/src/lib/components/NTable.tsx

@@ -0,0 +1,247 @@
+import { isWidthBreakpoint, type TWBreakpoint } from '../utils/breakpoints'
+import { createComponent } from '../utils/component'
+import { ChevronLeftIcon } from '@heroicons/vue/24/solid'
+import { computed, Fragment, ref, type PropType, watch } from 'vue'
+import NIconButton from './NIconButton'
+import './NTable.css'
+
+export type TableItem = string | number | (() => JSX.Element)
+
+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?: TableItem
+    /**
+     * 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
+    /**
+     * This classes will be directly set on all cells of this heading, when they show up in the details.
+     */
+    detailsClass?: string
+    /**
+     * If set the heading will become a details entry when the screen is smaller than the specified breakpoint.
+     */
+    breakpoint?: TWBreakpoint
+    /**
+     * If set to `true`, this heading will always show up inside the details. If this is set the `breakpoint`
+     * property has no effect, because the items always show up as details ignoring the breakpoint.
+     */
+    isDetail?: boolean
+}
+
+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
+    /**
+     * This classes will be applied to the whole table row.
+     */
+    rowClass?: string
+    /**
+     * This classes will be applied to the whole details section of the row.
+     */
+    detailsClass?: string
+}
+const N_TABLE_ACTION_KEY = 'action'
+
+export const nTableProps = {
+    /**
+     * The headings of the table. These define which columns are shown in the table and in which order.
+     */
+    headings: {
+        type: Array as PropType<TableHeading[]>,
+        required: true,
+    },
+    /**
+     * Adds the classes to all headings at the top of the table.
+     */
+    headingsClass: String,
+    /**
+     * Adds the classes to all headings in the details of the table.
+     */
+    headingDetailsClass: String,
+    /**
+     * 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: Array as PropType<TableRow[]>,
+        default: () => [],
+    },
+} as const
+
+/**
+ * The `NTable` is a styled html table which accepts data and displays it appropriately.
+ */
+const Component = createComponent('NTable', nTableProps, props => {
+    const headings = computed(() => {
+        // filter out details headings
+        const headings = props.headings.filter(heading => !isHeadingDetail(heading))
+
+        // The column for actions is shown if there are details
+        // or if any of the items contain an element with the action-key.
+        if (showDetails.value || props.items.filter(row => row.action != null).length != 0) {
+            headings.push({ key: N_TABLE_ACTION_KEY })
+        }
+
+        return headings
+    })
+
+    const details = computed(() => props.headings.filter(isHeadingDetail))
+
+    const showDetails = computed(() => details.value.length > 0)
+
+    const detailsOpen = ref<boolean[]>([])
+    const isDetailsOpen = (index: number) => detailsOpen.value[index] || false
+    const toggleDetailsOpen = (index: number) => (detailsOpen.value[index] = !detailsOpen.value[index])
+
+    // if the items change, reset all open details to closed
+    // and create correct amount of booleans for all items
+    watch(
+        () => props.items,
+        newItems => (detailsOpen.value = Array({ length: newItems.length }).map(() => false)),
+        { immediate: true }
+    )
+
+    return () => (
+        <div class="overflow-x-auto">
+            <table class="min-w-full text-default-500 text-sm">
+                <thead class="bg-default-50 ">
+                    <tr>
+                        {headings.value.map(heading => (
+                            <th key={heading.key} scope="col" class={`p-4 table-heading ${props.headingsClass}`}>
+                                {buildItem(heading.label)}
+                            </th>
+                        ))}
+                    </tr>
+                </thead>
+
+                {props.items.length > 0 &&
+                    props.items.map((item, itemIndex) => (
+                        <Fragment key={itemIndex}>
+                            {/* First tbody is the actual table-row with the entries */}
+                            <tbody
+                                class={[
+                                    'border-default-200 border-t',
+                                    itemIndex % 2 === 0 ? 'bg-white' : 'bg-default-50',
+                                    item.rowClass,
+                                ]}
+                            >
+                                <tr>
+                                    {headings.value.map(heading => (
+                                        <td key={itemIndex + '-' + heading.key} class="p-4">
+                                            <div
+                                                class={[
+                                                    'flex',
+                                                    heading.emph ? 'font-medium text-default-900' : '',
+                                                    heading.cellClass,
+                                                    heading.key == N_TABLE_ACTION_KEY
+                                                        ? 'justify-end items-center space-x-3'
+                                                        : '',
+                                                ]}
+                                            >
+                                                {item[heading.key] && buildItem(item[heading.key])}
+
+                                                {/* Add the chevron icon-button if details are present */}
+                                                {heading.key == N_TABLE_ACTION_KEY && showDetails.value && (
+                                                    <div
+                                                        class="inline-flex transition-transform duration-200"
+                                                        style={{
+                                                            transform: isDetailsOpen(itemIndex)
+                                                                ? 'rotate(-90deg)'
+                                                                : 'rotate(0deg)',
+                                                            transformOrigin: 'center center',
+                                                        }}
+                                                    >
+                                                        <NIconButton
+                                                            icon={ChevronLeftIcon}
+                                                            onClick={() => toggleDetailsOpen(itemIndex)}
+                                                        />
+                                                    </div>
+                                                )}
+                                            </div>
+                                        </td>
+                                    ))}
+                                </tr>
+                            </tbody>
+
+                            {/* Second tbody are the details (only shown if present and opened) */}
+                            {showDetails.value && isDetailsOpen(itemIndex) && (
+                                <tbody class={[itemIndex % 2 === 0 ? 'bg-white' : 'bg-default-50', item.detailsClass]}>
+                                    {details.value.map((detail, detailIndex) => (
+                                        <tr key={`detail-${detailIndex}`}>
+                                            <td
+                                                class={[
+                                                    'table-heading px-4 py-1',
+                                                    props.headingDetailsClass,
+                                                    details.value.length - 1 == detailIndex ? 'pb-4' : '',
+                                                ]}
+                                            >
+                                                {buildItem(detail.label)}
+                                            </td>
+                                            <td
+                                                class={[
+                                                    'px-4 py-1',
+                                                    details.value[detailIndex]?.detailsClass,
+                                                    details.value.length - 1 == detailIndex ? 'pb-4' : '',
+                                                ]}
+                                                colspan={headings.value.length - 1}
+                                            >
+                                                {item[detail.key] && buildItem(item[detail.key])}
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            )}
+                        </Fragment>
+                    ))}
+            </table>
+        </div>
+    )
+})
+
+export { Component as NTable, Component as default }
+
+/**
+ * Builds a JSX-Element out of the item
+ */
+function buildItem(item: TableItem | undefined) {
+    if (item === undefined) return undefined
+    else if (typeof item == 'string' || typeof item == 'number') return <>{item}</>
+    else return item()
+}
+
+function isHeadingDetail(heading: TableHeading): boolean {
+    // take all headings which are details or below the breakpoint
+    return heading.isDetail || (heading.breakpoint !== undefined && !isWidthBreakpoint(heading.breakpoint).value)
+}

package/src/lib/components/NTableAction.tsx

@@ -0,0 +1,49 @@
+import { createComponent } from '../utils/component'
+import type { PropType } from 'vue'
+import { RouterLink, type RouteLocationRaw } from 'vue-router'
+import { nButtonProps } from './NButton'
+
+export const nTableActionProps = {
+    /**
+     * The route of the action. If set the component will be a {@link RouterLink}.
+     */
+    route: [String, Object] as PropType<RouteLocationRaw>,
+    /**
+     * The text of the action.
+     */
+    text: String,
+    /**
+     * The html attribute, which indicates the type of the button.
+     */
+    type: nButtonProps.type,
+    /**
+     * This is called when the action is clicked.
+     * It is only called when the `route` prop is not set on the action.
+     */
+    onClick: Function as PropType<() => void>,
+} as const
+
+/**
+ * The `NTableAction` is a button or {@link RouterLink} which is styled to fit into a table.
+ * It is basically styled as an emphasized text in the table.
+ */
+const Component = createComponent('NTableAction', nTableActionProps, (props, { slots }) => {
+    const content = () => slots.default?.() || <>{props.text}</>
+
+    const classes = [
+        'text-left font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-default-900 rounded-sm ring-offset-2 text-default-900 hover:underline hover:text-default-700',
+    ]
+
+    return () =>
+        props.route ? (
+            <RouterLink to={props.route} class={classes}>
+                {content()}
+            </RouterLink>
+        ) : (
+            <button type={props.type} class={classes} onClick={props.onClick}>
+                {content()}
+            </button>
+        )
+})
+
+export { Component as NTableAction, Component as default }