@naptics/vue-collection 0.2.14 → 0.3.0

package/src/lib/components/NSearchbar.tsx

@@ -0,0 +1,78 @@
+import { trsl } from '../i18n'
+import { createComponent } from '../utils/component'
+import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid'
+import { ref, type PropType } from 'vue'
+import { vModelProps } from '../utils/vModel'
+
+export const nSearchbarProps = {
+    ...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,
+    /**
+     * Adds the classes directly to the input (e.g. for shadow).
+     */
+    inputClass: String,
+    /**
+     * This is called when the search-bar receives focus.
+     */
+    onFocus: Function as PropType<() => void>,
+    /**
+     * This is called when the search-bar looses focus.
+     */
+    onBlur: Function as PropType<() => void>,
+} as const
+
+export type NSearchbarExposed = {
+    /**
+     * Request focus on the search-bar.
+     */
+    focus(): void
+}
+
+/**
+ * The `NSearchbar` is a styled input with a search icon.
+ */
+const Component = createComponent('NSearchbar', nSearchbarProps, (props, context) => {
+    const inputRef = ref<HTMLInputElement>()
+    const exposed: NSearchbarExposed = {
+        focus: () => {
+            inputRef.value?.focus()
+        },
+    }
+    context.expose(exposed)
+
+    return () => (
+        <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 as HTMLInputElement).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>
+    )
+})
+
+export { Component as NSearchbar, Component as default }

package/src/lib/components/NSearchbarList.tsx

@@ -0,0 +1,47 @@
+import { createComponentWithSlots } from '../utils/component'
+import { ref } from 'vue'
+import { vModelProps } from '../utils/vModel'
+
+import NSearchbar, { nSearchbarProps, type NSearchbarExposed } from './NSearchbar'
+import NSuggestionList, { nSuggestionListPropsForConfig } from './NSuggestionList'
+
+export const nSearchbarListProps = {
+    ...nSuggestionListPropsForConfig,
+    ...vModelProps(String),
+    /**
+     * @see {@link nSearchbarProps.placeholder}
+     */
+    placeholder: nSearchbarProps.placeholder,
+    /**
+     * Adds the classes directly to the input (e.g. for shadow).
+     */
+    inputClass: String,
+} as const
+
+/**
+ * The `NSearchbarList` is a {@link NSearchbar} with a {@link NSuggestionList}.
+ */
+const Component = createComponentWithSlots('NSearchbarList', nSearchbarListProps, ['listItem'], props => {
+    const searchbarRef = ref<NSearchbarExposed>()
+
+    return () => (
+        <NSuggestionList
+            {...props}
+            inputValue={props.value || ''}
+            input={({ onFocus, onBlur }) => (
+                <NSearchbar
+                    ref={searchbarRef}
+                    value={props.value}
+                    onUpdateValue={props.onUpdateValue}
+                    placeholder={props.placeholder}
+                    inputClass={`shadow-lg ${props.inputClass}`}
+                    onFocus={onFocus}
+                    onBlur={onBlur}
+                />
+            )}
+            onRequestInputFocus={() => searchbarRef.value?.focus()}
+        />
+    )
+})
+
+export { Component as NSearchbarList, Component as default }

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;
+}