@naptics/vue-collection 0.0.1

package/lib/components/NModal.d.ts

@@ -0,0 +1,333 @@
+import type { PropType } from 'vue';
+import type { TWMaxWidth } from '../utils/tailwind';
+export declare const nModalProps: {
+    /**
+     * If set to `true` the header of the modal is hidden.
+     */
+    hideHeader: BooleanConstructor;
+    /**
+     * If set to `true` the footer of the modal is hidden.
+     */
+    hideFooter: BooleanConstructor;
+    /**
+     * If set to `true` the X-button in the top right is hidden.
+     */
+    hideX: BooleanConstructor;
+    /**
+     * The maximum width of the modal. A regular tailwind class.
+     */
+    maxWidth: {
+        type: PropType<TWMaxWidth>;
+        default: string;
+    };
+    /**
+     * The title of the modal which is displayed in the header.
+     */
+    title: StringConstructor;
+    /**
+     * The text of the ok-button.
+     */
+    okText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The color of the ok-button.
+     */
+    okColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * If set to `true` the modal is closed when `onOk` is called.
+     */
+    closeOnOk: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * If set to `true` the ok-button is hidden.
+     */
+    hideOk: BooleanConstructor;
+    /**
+     * If set to `true` the ok-button is disabled.
+     */
+    okDisabled: BooleanConstructor;
+    /**
+     * The text of the cancel-button.
+     */
+    cancelText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The color of the cancel-button.
+     */
+    cancelColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * If set to `true`, the modal is closed when clicking on the background.
+     * This will call `onCancel`. Default is `true`.
+     */
+    closeOnBackground: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * If set to `true` the cancel-button is hidden.
+     */
+    hideCancel: BooleanConstructor;
+    /**
+     * This is called when the ok-button was clicked.
+     */
+    onOk: 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: PropType<() => void>;
+    /**
+     * A slot to replace the whole modal content including all buttons, header and footer.
+     */
+    modal: PropType<(props: ModalSlotProps) => JSX.Element>;
+    /**
+     * A slot to replace the whole header section (excluding the x).
+     */
+    header: PropType<() => JSX.Element>;
+    /**
+     * A slot to replace the whole footer section.
+     */
+    footer: PropType<(props: ModalSlotProps) => JSX.Element>;
+    value: PropType<boolean>;
+    onUpdateValue: PropType<(newValue: boolean) => void>;
+};
+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.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * If set to `true` the header of the modal is hidden.
+     */
+    hideHeader: BooleanConstructor;
+    /**
+     * If set to `true` the footer of the modal is hidden.
+     */
+    hideFooter: BooleanConstructor;
+    /**
+     * If set to `true` the X-button in the top right is hidden.
+     */
+    hideX: BooleanConstructor;
+    /**
+     * The maximum width of the modal. A regular tailwind class.
+     */
+    maxWidth: {
+        type: PropType<TWMaxWidth>;
+        default: string;
+    };
+    /**
+     * The title of the modal which is displayed in the header.
+     */
+    title: StringConstructor;
+    /**
+     * The text of the ok-button.
+     */
+    okText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The color of the ok-button.
+     */
+    okColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * If set to `true` the modal is closed when `onOk` is called.
+     */
+    closeOnOk: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * If set to `true` the ok-button is hidden.
+     */
+    hideOk: BooleanConstructor;
+    /**
+     * If set to `true` the ok-button is disabled.
+     */
+    okDisabled: BooleanConstructor;
+    /**
+     * The text of the cancel-button.
+     */
+    cancelText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The color of the cancel-button.
+     */
+    cancelColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * If set to `true`, the modal is closed when clicking on the background.
+     * This will call `onCancel`. Default is `true`.
+     */
+    closeOnBackground: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * If set to `true` the cancel-button is hidden.
+     */
+    hideCancel: BooleanConstructor;
+    /**
+     * This is called when the ok-button was clicked.
+     */
+    onOk: 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: PropType<() => void>;
+    /**
+     * A slot to replace the whole modal content including all buttons, header and footer.
+     */
+    modal: PropType<(props: ModalSlotProps) => JSX.Element>;
+    /**
+     * A slot to replace the whole header section (excluding the x).
+     */
+    header: PropType<() => JSX.Element>;
+    /**
+     * A slot to replace the whole footer section.
+     */
+    footer: PropType<(props: ModalSlotProps) => JSX.Element>;
+    value: PropType<boolean>;
+    onUpdateValue: PropType<(newValue: boolean) => 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<{
+    /**
+     * If set to `true` the header of the modal is hidden.
+     */
+    hideHeader: BooleanConstructor;
+    /**
+     * If set to `true` the footer of the modal is hidden.
+     */
+    hideFooter: BooleanConstructor;
+    /**
+     * If set to `true` the X-button in the top right is hidden.
+     */
+    hideX: BooleanConstructor;
+    /**
+     * The maximum width of the modal. A regular tailwind class.
+     */
+    maxWidth: {
+        type: PropType<TWMaxWidth>;
+        default: string;
+    };
+    /**
+     * The title of the modal which is displayed in the header.
+     */
+    title: StringConstructor;
+    /**
+     * The text of the ok-button.
+     */
+    okText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The color of the ok-button.
+     */
+    okColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * If set to `true` the modal is closed when `onOk` is called.
+     */
+    closeOnOk: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * If set to `true` the ok-button is hidden.
+     */
+    hideOk: BooleanConstructor;
+    /**
+     * If set to `true` the ok-button is disabled.
+     */
+    okDisabled: BooleanConstructor;
+    /**
+     * The text of the cancel-button.
+     */
+    cancelText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The color of the cancel-button.
+     */
+    cancelColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * If set to `true`, the modal is closed when clicking on the background.
+     * This will call `onCancel`. Default is `true`.
+     */
+    closeOnBackground: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * If set to `true` the cancel-button is hidden.
+     */
+    hideCancel: BooleanConstructor;
+    /**
+     * This is called when the ok-button was clicked.
+     */
+    onOk: 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: PropType<() => void>;
+    /**
+     * A slot to replace the whole modal content including all buttons, header and footer.
+     */
+    modal: PropType<(props: ModalSlotProps) => JSX.Element>;
+    /**
+     * A slot to replace the whole header section (excluding the x).
+     */
+    header: PropType<() => JSX.Element>;
+    /**
+     * A slot to replace the whole footer section.
+     */
+    footer: PropType<(props: ModalSlotProps) => JSX.Element>;
+    value: PropType<boolean>;
+    onUpdateValue: PropType<(newValue: boolean) => void>;
+}>> & {}, {
+    maxWidth: TWMaxWidth;
+    hideX: boolean;
+    hideHeader: boolean;
+    hideFooter: boolean;
+    okText: string;
+    okColor: string;
+    closeOnOk: boolean;
+    hideOk: boolean;
+    okDisabled: boolean;
+    cancelText: string;
+    cancelColor: string;
+    closeOnBackground: boolean;
+    hideCancel: boolean;
+}>;
+export default _default;

package/lib/components/NModal.jsx

@@ -0,0 +1,170 @@
+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/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/lib/components/NPagination.d.ts

@@ -0,0 +1,99 @@
+import { type PropType } from 'vue';
+import './NPagination.css';
+export declare const nPaginationProps: {
+    /**
+     * The page number which is currently selected.
+     */
+    value: {
+        type: NumberConstructor;
+        default: () => 1;
+    };
+    /**
+     * This is called, when a new page number has been selected.
+     */
+    onUpdateValue: PropType<(newValue: number) => void>;
+    /**
+     * The total pages which exists. This is needed to correctly display the selectable pages.
+     */
+    total: {
+        type: NumberConstructor;
+        default: () => 1;
+    };
+    /**
+     * If set to `true`, the pagination is displayed smaller.
+     */
+    small: BooleanConstructor;
+    /**
+     * 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: PropType<(visiblePages: number[]) => void>;
+};
+/**
+ * The `NPagination` is a styled pagination component.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The page number which is currently selected.
+     */
+    value: {
+        type: NumberConstructor;
+        default: () => 1;
+    };
+    /**
+     * This is called, when a new page number has been selected.
+     */
+    onUpdateValue: PropType<(newValue: number) => void>;
+    /**
+     * The total pages which exists. This is needed to correctly display the selectable pages.
+     */
+    total: {
+        type: NumberConstructor;
+        default: () => 1;
+    };
+    /**
+     * If set to `true`, the pagination is displayed smaller.
+     */
+    small: BooleanConstructor;
+    /**
+     * 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: PropType<(visiblePages: number[]) => 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 page number which is currently selected.
+     */
+    value: {
+        type: NumberConstructor;
+        default: () => 1;
+    };
+    /**
+     * This is called, when a new page number has been selected.
+     */
+    onUpdateValue: PropType<(newValue: number) => void>;
+    /**
+     * The total pages which exists. This is needed to correctly display the selectable pages.
+     */
+    total: {
+        type: NumberConstructor;
+        default: () => 1;
+    };
+    /**
+     * If set to `true`, the pagination is displayed smaller.
+     */
+    small: BooleanConstructor;
+    /**
+     * 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: PropType<(visiblePages: number[]) => void>;
+}>> & {}, {
+    small: boolean;
+    value: number;
+    total: number;
+}>;
+export default _default;