@naptics/vue-collection 0.0.3 → 0.0.5

package/components/NModal.jsx

@@ -1,170 +0,0 @@
-import { createComponent, createProps } from '../utils/component';
-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 { vModelProps } from '../utils/vModel';
-export const nModalProps = createProps({
-    ...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,
-        default: 'max-w-md',
-    },
-    /**
-     * 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,
-    /**
-     * 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,
-    /**
-     * A slot to replace the whole modal content including all buttons, header and footer.
-     */
-    modal: Function,
-    /**
-     * A slot to replace the whole header section (excluding the x).
-     */
-    header: Function,
-    /**
-     * A slot to replace the whole footer section.
-     */
-    footer: Function,
-});
-/**
- * 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.
- */
-export default createComponent('NModal', nModalProps, (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-center justify-center 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>)}
-
-                                    <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>);
-});

package/components/NPagination.jsx

@@ -1,104 +0,0 @@
-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/components/NSearchbar.jsx

@@ -1,58 +0,0 @@
-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/components/NSearchbarList.jsx

@@ -1,20 +0,0 @@
-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/components/NSelect.jsx

@@ -1,81 +0,0 @@
-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>
-                </>)}/>);
-});

package/components/NSuggestionList.jsx

@@ -1,157 +0,0 @@
-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>);
-});