@naptics/vue-collection 0.2.15 → 0.3.0

package/src/lib/components/NModal.tsx

@@ -0,0 +1,243 @@
+import { createComponentWithSlots } from '../utils/component'
+import type { PropType } from 'vue'
+import { Dialog, DialogOverlay, DialogTitle, TransitionRoot, TransitionChild } from '@headlessui/vue'
+import NButton from './NButton'
+import NIconButton from './NIconButton'
+import { XMarkIcon } from '@heroicons/vue/24/solid'
+import { trsl } from '../i18n'
+import type { TWMaxWidth } from '../utils/tailwind'
+import { vModelProps } from '../utils/vModel'
+
+export const nModalProps = {
+    ...vModelProps(Boolean),
+    /**
+     * If set to `true` the header of the modal is hidden.
+     */
+    hideHeader: Boolean,
+    /**
+     * If set to `true` the footer of the modal is hidden.
+     */
+    hideFooter: Boolean,
+    /**
+     * If set to `true` the X-button in the top right is hidden.
+     */
+    hideX: Boolean,
+    /**
+     * The maximum width of the modal. A regular tailwind class.
+     */
+    maxWidth: {
+        type: String as PropType<TWMaxWidth>,
+        default: 'max-w-md',
+    },
+    /**
+     * The vertical position of the modal. Default is `center`.
+     */
+    verticalPosition: {
+        type: String as PropType<'start' | 'center' | 'end'>,
+        default: 'center',
+    },
+    /**
+     * The horizontal position of the modal. Default is `center`.
+     */
+    horizontalPosition: {
+        type: String as PropType<'start' | 'center' | 'end'>,
+        default: 'center',
+    },
+    /**
+     * The title of the modal which is displayed in the header.
+     */
+    title: String,
+    /**
+     * The text of the ok-button.
+     */
+    okText: {
+        type: String,
+        default: trsl('vue-collection.action.save'),
+    },
+    /**
+     * The color of the ok-button.
+     */
+    okColor: {
+        type: String,
+        default: 'primary',
+    },
+    /**
+     * If set to `true` the modal is closed when `onOk` is called.
+     */
+    closeOnOk: {
+        type: Boolean,
+        default: true,
+    },
+    /**
+     * If set to `true` the ok-button is hidden.
+     */
+    hideOk: Boolean,
+    /**
+     * If set to `true` the ok-button is disabled.
+     */
+    okDisabled: Boolean,
+    /**
+     * The text of the cancel-button.
+     */
+    cancelText: {
+        type: String,
+        default: trsl('vue-collection.action.cancel'),
+    },
+    /**
+     * The color of the cancel-button.
+     */
+    cancelColor: {
+        type: String,
+        default: 'default',
+    },
+    /**
+     * If set to `true`, the modal is closed when clicking on the background.
+     * This will call `onCancel`. Default is `true`.
+     */
+    closeOnBackground: {
+        type: Boolean,
+        default: true,
+    },
+    /**
+     * If set to `true` the cancel-button is hidden.
+     */
+    hideCancel: Boolean,
+    /**
+     * This is called when the ok-button was clicked.
+     */
+    onOk: Function as PropType<() => void>,
+    /**
+     * This is called when the cancel-button or X-button was clicked or
+     * if the modal was closed by clicking on the background.
+     */
+    onCancel: Function as PropType<() => void>,
+    /**
+     * A slot to replace the whole modal content including all buttons, header and footer.
+     */
+    modal: Function as PropType<(props: ModalSlotProps) => JSX.Element>,
+    /**
+     * A slot to replace the whole content section, i.e. everything between the header and the footer.
+     */
+    content: Function as PropType<(props: ModalSlotProps) => JSX.Element>,
+    /**
+     * A slot to replace the whole header section (excluding the x).
+     */
+    header: Function as PropType<() => JSX.Element>,
+    /**
+     * A slot to replace the whole footer section.
+     */
+    footer: Function as PropType<(props: ModalSlotProps) => JSX.Element>,
+} as const
+
+export type ModalSlotProps = { ok: () => void; cancel: () => void }
+
+/**
+ * The `NModal` is the base component for all modals and dialogs.
+ * It provides the core mechanics to display a window in front of everything else.
+ */
+const Component = createComponentWithSlots('NModal', nModalProps, ['modal', 'header', 'footer'], (props, { slots }) => {
+    const ok = () => {
+        props.onOk?.()
+        if (props.closeOnOk) props.onUpdateValue?.(false)
+    }
+
+    const cancel = () => {
+        props.onCancel?.()
+        props.onUpdateValue?.(false)
+    }
+
+    return () => (
+        <TransitionRoot as="template" show={props.value}>
+            <Dialog as="div" static class="fixed z-40 inset-0 overflow-y-auto" onClose={cancel} open={props.value}>
+                <div class={`flex items-${props.verticalPosition} justify-${props.horizontalPosition} min-h-screen`}>
+                    <TransitionChild
+                        as="template"
+                        enter="ease-out duration-300"
+                        enter-from="opacity-0"
+                        enter-to="opacity-100"
+                        leave="ease-in duration-200"
+                        leave-from="opacity-100"
+                        leave-to="opacity-0"
+                    >
+                        {props.closeOnBackground ? (
+                            <DialogOverlay class="fixed inset-0 bg-default-700 bg-opacity-75" />
+                        ) : (
+                            <div class="fixed inset-0 bg-default-700 bg-opacity-75" />
+                        )}
+                    </TransitionChild>
+
+                    {/* This element is to trick the browser into centering the modal contents. */}
+                    <span class="hidden align-middle h-screen" aria-hidden="true">
+                        &#8203;
+                    </span>
+
+                    <TransitionChild
+                        as="template"
+                        enter="ease-out duration-300"
+                        enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        enter-to="opacity-100 translate-y-0 sm:scale-100"
+                        leave="ease-in duration-200"
+                        leave-from="opacity-100 translate-y-0 sm:scale-100"
+                        leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    >
+                        <div class={['transform m-4 w-full align-middle', props.maxWidth]}>
+                            {props.modal?.({ ok, cancel }) || (
+                                <div
+                                    class={[
+                                        'shadow-xl rounded-lg bg-white divide-y divide-default-100',
+                                        props.maxWidth,
+                                    ]}
+                                >
+                                    {!props.hideX && (
+                                        <div class="sm:block absolute top-0 right-0 mt-3 mr-3">
+                                            <NIconButton icon={XMarkIcon} color="default" size={5} onClick={cancel} />
+                                        </div>
+                                    )}
+
+                                    {!props.hideHeader && (
+                                        <div class="px-4 sm:px-6 pt-4 pb-2 bg-default-50 rounded-t-lg">
+                                            {props.header?.() || (
+                                                <DialogTitle as="h4" class="text-lg font-semibold">
+                                                    {props.title}
+                                                </DialogTitle>
+                                            )}
+                                        </div>
+                                    )}
+
+                                    {props.content?.({ ok, cancel }) || (
+                                        <div class="px-4 sm:px-6 py-4 rounded-lg">{slots.default?.()}</div>
+                                    )}
+
+                                    {!props.hideFooter && (
+                                        <div class="px-4 sm:px-6 pb-4 pt-2 bg-default-50 rounded-b-lg">
+                                            {props.footer?.({ ok, cancel }) || (
+                                                <div class="flex justify-end space-x-2">
+                                                    {!props.hideCancel && (
+                                                        <NButton color={props.cancelColor} onClick={cancel}>
+                                                            {props.cancelText}
+                                                        </NButton>
+                                                    )}
+                                                    {!props.hideOk && (
+                                                        <NButton
+                                                            color={props.okColor}
+                                                            onClick={ok}
+                                                            disabled={props.okDisabled}
+                                                        >
+                                                            {props.okText}
+                                                        </NButton>
+                                                    )}
+                                                </div>
+                                            )}
+                                        </div>
+                                    )}
+                                </div>
+                            )}
+                        </div>
+                    </TransitionChild>
+                </div>
+            </Dialog>
+        </TransitionRoot>
+    )
+})
+
+export { Component as NModal, Component as default }

package/src/lib/components/NPagination.css

@@ -0,0 +1,15 @@
+.pagination-item {
+    @apply h-9 w-9 text-sm inline-flex items-center justify-center border font-medium border-default-300 text-default-500;
+}
+
+.pagination-item.not-small {
+    @apply sm:w-11;
+}
+
+.pagination-item.selectable {
+    @apply hover:bg-default-50 focus:outline-none focus-visible:border-primary-500 focus-visible:ring-primary-500 focus-visible:ring-1 focus-visible:z-[2];
+}
+
+.pagination-item.selectable.selected {
+    @apply border-primary-500 bg-primary-100 hover:bg-primary-100 text-primary-600 z-[1];
+}

package/src/lib/components/NPagination.tsx

@@ -0,0 +1,131 @@
+import { createComponent } from '../utils/component'
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/solid'
+import { computed, watch, type ComputedRef, type PropType } from 'vue'
+import './NPagination.css'
+
+export const nPaginationProps = {
+    /**
+     * 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 as PropType<(newValue: number) => void>,
+    /**
+     * 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 as PropType<(visiblePages: number[]) => void>,
+} as const
+
+/**
+ * The `NPagination` is a styled pagination component.
+ */
+const Component = 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: number) => {
+        if (value <= props.total && value >= 1) props.onUpdateValue?.(value)
+    }
+    const next = () => clickedNumber(props.value + 1)
+    const previous = () => clickedNumber(props.value - 1)
+
+    const items: ComputedRef<PaginationItem[]> = 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: PaginationItem) => [
+        '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}
+            >
+                <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}>
+                <ChevronRightIcon class="h-5 w-5" aria-hidden="true" />
+            </button>
+        </nav>
+    )
+})
+
+export { Component as NPagination, Component as default }
+
+type PaginationItem = {
+    label: string
+    selectable: boolean
+    selected: boolean
+    click?: () => void
+}
+
+function range(from: number, to: number): number[] {
+    const array: number[] = []
+    for (let i = from; i <= to; i++) {
+        array.push(i)
+    }
+    return array
+}

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 }