@naptics/vue-collection 0.0.1

package/lib/components/NCrudModal.d.ts

@@ -0,0 +1,301 @@
+import { type PropType } from 'vue';
+import type { DialogVariant } from './NDialog';
+export declare const nCrudModalProps: {
+    /**
+     * The text of the remove-button.
+     */
+    removeText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The color of the remove-button.
+     */
+    removeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The title of the dialog which appears when clicking on the remove-button.
+     */
+    removeDialogTitle: StringConstructor;
+    /**
+     * The text of the dialog which appears when clicking on the remove-button.
+     */
+    removeDialogText: StringConstructor;
+    /**
+     * The variant of the dialog which appears when clicking on the remove-button. Default is `remove`.
+     */
+    removeDialogVariant: {
+        type: PropType<DialogVariant>;
+        default: string;
+    };
+    /**
+     * The text of the dialog's ok-button. Is already set by the `removeDialogVariant` but can be overridden.
+     */
+    removeDialogOkText: StringConstructor;
+    /**
+     * If set to `true` the modal will close itself when `onRemove` is called.
+     */
+    closeOnRemove: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * This is called, when the remove-button has been clicked and the dialog has been accepted.
+     */
+    onRemove: PropType<() => void>;
+    maxWidth: {
+        type: PropType<import("../utils/tailwind").TWMaxWidth>;
+        default: string;
+    };
+    closeOnBackground: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    form: PropType<import("./ValidatedForm").ValidatedForm>;
+    hideHeader: BooleanConstructor;
+    hideFooter: BooleanConstructor;
+    hideX: BooleanConstructor;
+    title: StringConstructor;
+    okText: {
+        type: StringConstructor;
+        default: string;
+    };
+    okColor: {
+        /**
+         * If set to `true` the modal will close itself when `onRemove` is called.
+         */
+        type: StringConstructor;
+        default: string;
+    };
+    closeOnOk: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideOk: BooleanConstructor;
+    okDisabled: BooleanConstructor;
+    cancelText: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    hideCancel: BooleanConstructor;
+    onOk: PropType<() => void>;
+    onCancel: PropType<() => void>;
+    modal: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
+    header: PropType<() => JSX.Element>;
+    footer: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
+    value: PropType<boolean>;
+    onUpdateValue: PropType<(newValue: boolean) => void>;
+};
+/**
+ * The `NCrudModal` is a {@link NFormModal} which has some convenience features for a CRUD-scenario.
+ * It has an integrated remove-button with a user-dialog to remove the editing element.
+ * When the dialog is accepted `onRemove` is called.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The text of the remove-button.
+     */
+    removeText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The color of the remove-button.
+     */
+    removeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The title of the dialog which appears when clicking on the remove-button.
+     */
+    removeDialogTitle: StringConstructor;
+    /**
+     * The text of the dialog which appears when clicking on the remove-button.
+     */
+    removeDialogText: StringConstructor;
+    /**
+     * The variant of the dialog which appears when clicking on the remove-button. Default is `remove`.
+     */
+    removeDialogVariant: {
+        type: PropType<DialogVariant>;
+        default: string;
+    };
+    /**
+     * The text of the dialog's ok-button. Is already set by the `removeDialogVariant` but can be overridden.
+     */
+    removeDialogOkText: StringConstructor;
+    /**
+     * If set to `true` the modal will close itself when `onRemove` is called.
+     */
+    closeOnRemove: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * This is called, when the remove-button has been clicked and the dialog has been accepted.
+     */
+    onRemove: PropType<() => void>;
+    maxWidth: {
+        type: PropType<import("../utils/tailwind").TWMaxWidth>;
+        default: string;
+    };
+    closeOnBackground: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    form: PropType<import("./ValidatedForm").ValidatedForm>;
+    hideHeader: BooleanConstructor;
+    hideFooter: BooleanConstructor;
+    hideX: BooleanConstructor;
+    title: StringConstructor;
+    okText: {
+        type: StringConstructor;
+        default: string;
+    };
+    okColor: {
+        /**
+         * If set to `true` the modal will close itself when `onRemove` is called.
+         */
+        type: StringConstructor;
+        default: string;
+    };
+    closeOnOk: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideOk: BooleanConstructor;
+    okDisabled: BooleanConstructor;
+    cancelText: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    hideCancel: BooleanConstructor;
+    onOk: PropType<() => void>;
+    onCancel: PropType<() => void>;
+    modal: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
+    header: PropType<() => JSX.Element>;
+    footer: PropType<(props: import("./NModal").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<{
+    /**
+     * The text of the remove-button.
+     */
+    removeText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The color of the remove-button.
+     */
+    removeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The title of the dialog which appears when clicking on the remove-button.
+     */
+    removeDialogTitle: StringConstructor;
+    /**
+     * The text of the dialog which appears when clicking on the remove-button.
+     */
+    removeDialogText: StringConstructor;
+    /**
+     * The variant of the dialog which appears when clicking on the remove-button. Default is `remove`.
+     */
+    removeDialogVariant: {
+        type: PropType<DialogVariant>;
+        default: string;
+    };
+    /**
+     * The text of the dialog's ok-button. Is already set by the `removeDialogVariant` but can be overridden.
+     */
+    removeDialogOkText: StringConstructor;
+    /**
+     * If set to `true` the modal will close itself when `onRemove` is called.
+     */
+    closeOnRemove: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * This is called, when the remove-button has been clicked and the dialog has been accepted.
+     */
+    onRemove: PropType<() => void>;
+    maxWidth: {
+        type: PropType<import("../utils/tailwind").TWMaxWidth>;
+        default: string;
+    };
+    closeOnBackground: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    form: PropType<import("./ValidatedForm").ValidatedForm>;
+    hideHeader: BooleanConstructor;
+    hideFooter: BooleanConstructor;
+    hideX: BooleanConstructor;
+    title: StringConstructor;
+    okText: {
+        type: StringConstructor;
+        default: string;
+    };
+    okColor: {
+        /**
+         * If set to `true` the modal will close itself when `onRemove` is called.
+         */
+        type: StringConstructor;
+        default: string;
+    };
+    closeOnOk: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideOk: BooleanConstructor;
+    okDisabled: BooleanConstructor;
+    cancelText: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    hideCancel: BooleanConstructor;
+    onOk: PropType<() => void>;
+    onCancel: PropType<() => void>;
+    modal: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
+    header: PropType<() => JSX.Element>;
+    footer: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
+    value: PropType<boolean>;
+    onUpdateValue: PropType<(newValue: boolean) => void>;
+}>> & {}, {
+    maxWidth: import("../utils/tailwind").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;
+    removeText: string;
+    removeColor: string;
+    removeDialogVariant: DialogVariant;
+    closeOnRemove: boolean;
+}>;
+export default _default;

package/lib/components/NCrudModal.jsx

@@ -0,0 +1,89 @@
+import { trsl } from '../i18n';
+import { createComponent, createProps } from '../utils/component';
+import { ref } from 'vue';
+import NButton from './NButton';
+import NDialog from './NDialog';
+import NFormModal, { nFormModalProps } from './NFormModal';
+export const nCrudModalProps = createProps({
+    ...nFormModalProps,
+    /**
+     * The text of the remove-button.
+     */
+    removeText: {
+        type: String,
+        default: trsl('vue-collection.action.remove'),
+    },
+    /**
+     * The color of the remove-button.
+     */
+    removeColor: {
+        type: String,
+        default: 'red',
+    },
+    /**
+     * The title of the dialog which appears when clicking on the remove-button.
+     */
+    removeDialogTitle: String,
+    /**
+     * The text of the dialog which appears when clicking on the remove-button.
+     */
+    removeDialogText: String,
+    /**
+     * The variant of the dialog which appears when clicking on the remove-button. Default is `remove`.
+     */
+    removeDialogVariant: {
+        type: String,
+        default: 'remove',
+    },
+    /**
+     * The text of the dialog's ok-button. Is already set by the `removeDialogVariant` but can be overridden.
+     */
+    removeDialogOkText: String,
+    /**
+     * If set to `true` the modal will close itself when `onRemove` is called.
+     */
+    closeOnRemove: {
+        type: Boolean,
+        default: true,
+    },
+    /**
+     * This is called, when the remove-button has been clicked and the dialog has been accepted.
+     */
+    onRemove: Function,
+});
+/**
+ * The `NCrudModal` is a {@link NFormModal} which has some convenience features for a CRUD-scenario.
+ * It has an integrated remove-button with a user-dialog to remove the editing element.
+ * When the dialog is accepted `onRemove` is called.
+ */
+export default createComponent('NCrudModal', nCrudModalProps, (props, { slots }) => {
+    const removeDialog = ref();
+    const remove = () => {
+        removeDialog.value?.show().then(result => {
+            if (result) {
+                props.onRemove?.();
+                if (props.closeOnRemove)
+                    props.onUpdateValue?.(false);
+            }
+        });
+    };
+    return () => (<NFormModal {...props} footer={props.footer ||
+            (({ ok, cancel }) => (<div class="flex justify-between">
+                        <div>
+                            <NButton color={props.removeColor} onClick={remove}>
+                                {props.removeText}
+                            </NButton>
+                        </div>
+                        <div>
+                            <NButton color={props.cancelColor} onClick={cancel}>
+                                {props.cancelText}
+                            </NButton>
+                            <NButton color={props.okColor} onClick={ok} class="ml-2" disabled={props.okDisabled}>
+                                {props.okText}
+                            </NButton>
+                        </div>
+                    </div>))}>
+            {slots.default?.()}
+            <NDialog ref={removeDialog} variant={props.removeDialogVariant} title={props.removeDialogTitle} text={props.removeDialogText} okText={props.removeDialogOkText}/>
+        </NFormModal>);
+});

package/lib/components/NDialog.d.ts

@@ -0,0 +1,190 @@
+import { type PropType } from 'vue';
+import type { HeroIcon } from '../utils/utils';
+export type DialogVariant = 'success' | 'info' | 'warning' | 'danger' | 'remove';
+export declare const nDialogProps: {
+    /**
+     * The title of the dialog.
+     */
+    title: StringConstructor;
+    /**
+     * The text of the dialog.
+     */
+    text: StringConstructor;
+    /**
+     * The variant of the dialog.
+     * This determines the default icon and its color
+     * as well as the default text and color of the ok-button.
+     */
+    variant: {
+        type: PropType<DialogVariant>;
+        default: string;
+    };
+    /**
+     * The icon of the alert. This overrides the `icon` of the `variant`.
+     */
+    icon: PropType<HeroIcon>;
+    /**
+     * The color of the alert's icon. This overrides the `iconColor` of the `variant`.
+     */
+    iconColor: StringConstructor;
+    /**
+     * The text of the ok-button. This overrides the `okText` of the `variant`.
+     */
+    okText: StringConstructor;
+    /**
+     * The color of the ok-button. This overrides the `okColor` of the `variant`.
+     */
+    okColor: StringConstructor;
+    /**
+     * 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 cancel-button is hidden.
+     */
+    hideCancel: BooleanConstructor;
+};
+export type NDialogExposed = {
+    /**
+     * Shows the alert and returns a promise.
+     * When the user interaction occurs the promise is resolved.
+     * It is resolved to `true` if the okButton was clicked, `false` if the dialog was cancelled.
+     */
+    show(): Promise<boolean>;
+};
+/**
+ * A `NDialog` is an element to interact directly with the user.
+ * It can be controlled via a ref to prompt the user and to receive their answer.
+ * @example
+ * const dialogRef = ref<NDialogExposed>()
+ * ...
+ * const onShowDialog = () => {
+ *   dialofRef.value?.show().then(result => {
+ *     if (result)   // dialog accepted
+ *     else          // dialog cancelled
+ *   })
+ * }
+ * ...
+ * <NDialog ref={dialogRef} />
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The title of the dialog.
+     */
+    title: StringConstructor;
+    /**
+     * The text of the dialog.
+     */
+    text: StringConstructor;
+    /**
+     * The variant of the dialog.
+     * This determines the default icon and its color
+     * as well as the default text and color of the ok-button.
+     */
+    variant: {
+        type: PropType<DialogVariant>;
+        default: string;
+    };
+    /**
+     * The icon of the alert. This overrides the `icon` of the `variant`.
+     */
+    icon: PropType<HeroIcon>;
+    /**
+     * The color of the alert's icon. This overrides the `iconColor` of the `variant`.
+     */
+    iconColor: StringConstructor;
+    /**
+     * The text of the ok-button. This overrides the `okText` of the `variant`.
+     */
+    okText: StringConstructor;
+    /**
+     * The color of the ok-button. This overrides the `okColor` of the `variant`.
+     */
+    okColor: StringConstructor;
+    /**
+     * 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 cancel-button is hidden.
+     */
+    hideCancel: BooleanConstructor;
+}, 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 title of the dialog.
+     */
+    title: StringConstructor;
+    /**
+     * The text of the dialog.
+     */
+    text: StringConstructor;
+    /**
+     * The variant of the dialog.
+     * This determines the default icon and its color
+     * as well as the default text and color of the ok-button.
+     */
+    variant: {
+        type: PropType<DialogVariant>;
+        default: string;
+    };
+    /**
+     * The icon of the alert. This overrides the `icon` of the `variant`.
+     */
+    icon: PropType<HeroIcon>;
+    /**
+     * The color of the alert's icon. This overrides the `iconColor` of the `variant`.
+     */
+    iconColor: StringConstructor;
+    /**
+     * The text of the ok-button. This overrides the `okText` of the `variant`.
+     */
+    okText: StringConstructor;
+    /**
+     * The color of the ok-button. This overrides the `okColor` of the `variant`.
+     */
+    okColor: StringConstructor;
+    /**
+     * 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 cancel-button is hidden.
+     */
+    hideCancel: BooleanConstructor;
+}>> & {}, {
+    variant: DialogVariant;
+    cancelText: string;
+    cancelColor: string;
+    hideCancel: boolean;
+}>;
+export default _default;