@naptics/vue-collection 0.3.1 → 1.0.0-beta.1

package/components/NCheckboxLabel.js

@@ -1,42 +0,0 @@
-import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
-import { createComponent } from '../utils/component';
-import NCheckbox, { nCheckboxProps } from './NCheckbox';
-export const nCheckboxLabelProps = {
-  ...nCheckboxProps,
-  /**
-   * The title of the checkbox.
-   */
-  title: String,
-  /**
-   * The description of the checkbox.
-   */
-  description: String,
-  /**
-   * If set to `true`, a smaller margin is applied between the label and the checkbox.
-   */
-  compact: Boolean
-};
-/**
- * The `NCheckboxLabel` is a checkbox with a title and a description.
- */
-const Component = createComponent('NCheckboxLabel', nCheckboxLabelProps, props => {
-  const toggleValue = () => {
-    if (!props.disabled) props.onUpdateValue?.(!props.value);
-  };
-  return () => _createVNode("div", {
-    "class": `flex ${props.description ? 'items-start' : 'items-center'}`
-  }, [_createVNode(NCheckbox, _mergeProps(props, {
-    "class": props.description ? 'mt-1' : ''
-  }), null), _createVNode("div", {
-    "class": `${props.compact ? 'ml-2' : 'ml-3'} text-sm`
-  }, [_createVNode("label", {
-    "onClick": toggleValue,
-    "class": ['font-medium select-none', props.disabled ? 'text-default-300' : 'text-default-700 cursor-pointer']
-  }, [props.title]), _createVNode("p", {
-    "class": props.disabled ? 'text-default-300' : 'text-default-500'
-  }, [_createVNode("span", {
-    "onClick": toggleValue,
-    "class": ['select-none', props.disabled ? '' : 'cursor-pointer']
-  }, [props.description])])])]);
-});
-export { Component as NCheckboxLabel, Component as default };

package/components/NCrudModal.d.ts

@@ -1,118 +0,0 @@
-import { type PropType } from 'vue';
-import type { DialogVariant } from './NDialog';
-export declare const nCrudModalProps: {
-    /**
-     * The text of the remove-button.
-     */
-    readonly removeText: {
-        readonly type: StringConstructor;
-        readonly default: string;
-    };
-    /**
-     * The color of the remove-button.
-     */
-    readonly removeColor: {
-        readonly type: StringConstructor;
-        readonly default: "red";
-    };
-    /**
-     * If set to `true` the remove-button is disabled.
-     */
-    readonly removeDisabled: BooleanConstructor;
-    /**
-     * If set to `true` the ok-button is hidden.
-     */
-    readonly hideRemove: BooleanConstructor;
-    /**
-     * If set to `true` the ok-button is disabled.
-     */
-    readonly okDisabled: BooleanConstructor;
-    /**
-     * The title of the dialog which appears when clicking on the remove-button.
-     */
-    readonly removeDialogTitle: StringConstructor;
-    /**
-     * The text of the dialog which appears when clicking on the remove-button.
-     */
-    readonly removeDialogText: StringConstructor;
-    /**
-     * The variant of the dialog which appears when clicking on the remove-button. Default is `remove`.
-     */
-    readonly removeDialogVariant: {
-        readonly type: PropType<DialogVariant>;
-        readonly default: "remove";
-    };
-    /**
-     * The text of the dialog's ok-button. Is already set by the `removeDialogVariant` but can be overridden.
-     */
-    readonly removeDialogOkText: StringConstructor;
-    /**
-     * If set to `true` the modal will close itself when `onRemove` is called.
-     */
-    readonly closeOnRemove: {
-        readonly type: BooleanConstructor;
-        readonly default: true;
-    };
-    /**
-     * This is called, when the remove-button has been clicked and the dialog has been accepted.
-     */
-    readonly onRemove: PropType<() => void>;
-    readonly maxWidth: {
-        readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
-        readonly default: "max-w-lg";
-    };
-    readonly closeOnBackground: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
-    readonly form: PropType<import("./ValidatedForm").ValidatedForm>;
-    readonly hideHeader: BooleanConstructor;
-    readonly hideFooter: BooleanConstructor;
-    readonly hideX: BooleanConstructor;
-    readonly verticalPosition: {
-        readonly type: PropType<"start" | "center" | "end">;
-        readonly default: "center";
-    };
-    readonly horizontalPosition: {
-        readonly type: PropType<"start" | "center" | "end">;
-        readonly default: "center";
-    };
-    readonly title: StringConstructor;
-    readonly okText: {
-        readonly type: StringConstructor;
-        readonly default: string;
-    };
-    readonly okColor: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    readonly closeOnOk: {
-        readonly type: BooleanConstructor;
-        readonly default: true;
-    };
-    readonly hideOk: BooleanConstructor;
-    readonly cancelText: {
-        readonly type: StringConstructor;
-        readonly default: string;
-    };
-    readonly cancelColor: {
-        readonly type: StringConstructor;
-        readonly default: "default";
-    };
-    readonly hideCancel: BooleanConstructor;
-    readonly onOk: PropType<() => void>;
-    readonly onCancel: PropType<() => void>;
-    readonly modal: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
-    readonly content: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
-    readonly header: PropType<() => JSX.Element>;
-    readonly footer: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
-    readonly value: PropType<boolean>;
-    readonly 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 Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NCrudModal, Component as default };

package/components/NCrudModal.js

@@ -1,120 +0,0 @@
-import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
-import { trsl } from '../i18n';
-import { createComponentWithSlots } from '../utils/component';
-import { ref } from 'vue';
-import NButton from './NButton';
-import NDialog from './NDialog';
-import NFormModal, { nFormModalProps } from './NFormModal';
-export const nCrudModalProps = {
-  ...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'
-  },
-  /**
-   * If set to `true` the remove-button is disabled.
-   */
-  removeDisabled: Boolean,
-  /**
-   * If set to `true` the ok-button is hidden.
-   */
-  hideRemove: Boolean,
-  /**
-   * If set to `true` the ok-button is disabled.
-   */
-  okDisabled: Boolean,
-  /**
-   * 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.
- */
-const Component = createComponentWithSlots('NCrudModal', nCrudModalProps, ['modal', 'footer', 'header'], (props, {
-  slots
-}) => {
-  const removeDialog = ref();
-  const remove = () => {
-    removeDialog.value?.show().then(result => {
-      if (result) {
-        props.onRemove?.();
-        if (props.closeOnRemove) props.onUpdateValue?.(false);
-      }
-    });
-  };
-  return () => _createVNode(NFormModal, _mergeProps(props, {
-    "footer": props.footer || (({
-      ok,
-      cancel
-    }) => _createVNode("div", {
-      "class": "flex justify-between"
-    }, [_createVNode("div", null, [!props.hideRemove && _createVNode(NButton, {
-      "color": props.removeColor,
-      "onClick": remove,
-      "disabled": props.removeDisabled
-    }, {
-      default: () => [props.removeText]
-    })]), _createVNode("div", {
-      "class": "flex justify-end space-x-2"
-    }, [!props.hideCancel && _createVNode(NButton, {
-      "color": props.cancelColor,
-      "onClick": cancel
-    }, {
-      default: () => [props.cancelText]
-    }), !props.hideOk && _createVNode(NButton, {
-      "color": props.okColor,
-      "onClick": ok,
-      "disabled": props.okDisabled
-    }, {
-      default: () => [props.okText]
-    })])]))
-  }), {
-    default: () => [slots.default?.(), _createVNode(NDialog, {
-      "ref": removeDialog,
-      "variant": props.removeDialogVariant,
-      "title": props.removeDialogTitle,
-      "text": props.removeDialogText,
-      "okText": props.removeDialogOkText
-    }, null)]
-  });
-});
-export { Component as NCrudModal, Component as default };

package/components/NDialog.d.ts

@@ -1,81 +0,0 @@
-import { type PropType } from 'vue';
-import type { HeroIcon } from '../utils/tailwind';
-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 Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NDialog, Component as default };

package/components/NDialog.js

@@ -1,161 +0,0 @@
-import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
-import { deferred } from '../utils/deferred';
-import { createComponent, extractProps } from '../utils/component';
-import { CheckIcon, ExclamationTriangleIcon, LightBulbIcon, TrashIcon } from '@heroicons/vue/24/outline';
-import { computed, ref } from 'vue';
-import NIconCircle from './NIconCircle';
-import NModal from './NModal';
-import { DialogTitle } from '@headlessui/vue';
-import { trsl } from '../i18n';
-import { vModelForRef } from '../utils/vModel';
-export const nDialogProps = {
-  /**
-   * The title of the dialog.
-   */
-  title: String,
-  /**
-   * The text of the dialog.
-   */
-  text: String,
-  /**
-   * 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: String,
-    default: 'warning'
-  },
-  /**
-   * The icon of the alert. This overrides the `icon` of the `variant`.
-   */
-  icon: Function,
-  /**
-   * The color of the alert's icon. This overrides the `iconColor` of the `variant`.
-   */
-  iconColor: String,
-  /**
-   * The text of the ok-button. This overrides the `okText` of the `variant`.
-   */
-  okText: String,
-  /**
-   * The color of the ok-button. This overrides the `okColor` of the `variant`.
-   */
-  okColor: String,
-  /**
-   * 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 cancel-button is hidden.
-   */
-  hideCancel: 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} />
- */
-const Component = createComponent('NDialog', nDialogProps, (props, context) => {
-  const showDialog = ref(false);
-  let deferredPromise = null;
-  const show = () => {
-    if (deferredPromise != null) {
-      deferredPromise.reject('show() was called on the open dialog.');
-      deferredPromise = null;
-    }
-    showDialog.value = true;
-    deferredPromise = deferred();
-    return deferredPromise.promise;
-  };
-  context.expose({
-    show
-  });
-  const resolveWith = result => {
-    deferredPromise?.resolve(result);
-    deferredPromise = null;
-  };
-  const ok = () => resolveWith(true);
-  const cancel = () => resolveWith(false);
-  const defaults = computed(() => VARIANT_DEFAULTS[props.variant]);
-  return () => _createVNode(NModal, _mergeProps(vModelForRef(showDialog), extractProps(props, 'cancelColor', 'cancelText', 'hideCancel'), {
-    "onOk": ok,
-    "onCancel": cancel,
-    "okColor": props.okColor || defaults.value.okColor,
-    "okText": props.okText || defaults.value.okText,
-    "hideX": true,
-    "hideHeader": true
-  }), {
-    default: () => [_createVNode("div", {
-      "class": "flex space-x-4 py-2"
-    }, [_createVNode("div", {
-      "class": "flex-grow-0"
-    }, [_createVNode(NIconCircle, {
-      "icon": props.icon || defaults.value.icon,
-      "iconSize": 6,
-      "color": props.iconColor || defaults.value.iconColor
-    }, null)]), _createVNode("div", {
-      "class": "flex-grow"
-    }, [_createVNode(DialogTitle, {
-      "as": "h4",
-      "class": "font-medium text-lg text-default-700 mb-1"
-    }, {
-      default: () => [props.title]
-    }), context.slots.default?.() || _createVNode("p", {
-      "class": "text-sm text-default-500"
-    }, [props.text])])])]
-  });
-});
-const VARIANT_DEFAULTS = {
-  success: {
-    icon: CheckIcon,
-    iconColor: 'green',
-    okText: trsl('vue-collection.action.all-right'),
-    okColor: 'green'
-  },
-  info: {
-    icon: LightBulbIcon,
-    iconColor: 'blue',
-    okText: trsl('vue-collection.action.all-right'),
-    okColor: 'blue'
-  },
-  warning: {
-    icon: ExclamationTriangleIcon,
-    iconColor: 'yellow',
-    okText: trsl('vue-collection.action.proceed'),
-    okColor: 'yellow'
-  },
-  danger: {
-    icon: ExclamationTriangleIcon,
-    iconColor: 'red',
-    okText: trsl('vue-collection.action.proceed'),
-    okColor: 'red'
-  },
-  remove: {
-    icon: TrashIcon,
-    iconColor: 'red',
-    okText: trsl('vue-collection.action.remove'),
-    okColor: 'red'
-  }
-};
-export { Component as NDialog, Component as default };

package/components/NDropdown.d.ts

@@ -1,67 +0,0 @@
-import { type PropType } from 'vue';
-import { type RouteLocationRaw } from 'vue-router';
-import { MenuButton } from '@headlessui/vue';
-import type { HeroIcon } from '../utils/tailwind';
-export declare const nDropdownProps: {
-    /**
-     * The title of the dropdown-button.
-     */
-    readonly title: StringConstructor;
-    /**
-     * The items of the dropdown.
-     * The second dimension of the array is used
-     * to create groups of items, which are visually seperated.
-     */
-    readonly items: {
-        readonly type: PropType<DropdownItem[] | DropdownItem[][]>;
-        readonly default: () => never[];
-    };
-    /**
-     * If set to `true` the panel is right-aligned to the button.
-     */
-    readonly right: BooleanConstructor;
-    /**
-     * If set to `true` the dropdown-button is disabled and no interaction is possible.
-     */
-    readonly disabled: BooleanConstructor;
-    /**
-     * Adds the classes to the Button of the dropdown.
-     */
-    readonly buttonClass: StringConstructor;
-    /**
-     * A slot to replace the button of the dropdown.
-     * The passed parameter is the HeadlessUI `MenuButton` which should be
-     * used to create the button for the Dropdown to work properly.
-     */
-    readonly button: PropType<(button: typeof MenuButton) => JSX.Element>;
-};
-export type DropdownItem = {
-    /**
-     * The label of the dropdown-item.
-     */
-    label: string;
-    /**
-     * The icon of the dropdown-item. Is displayed to the left of the text.
-     */
-    icon?: HeroIcon;
-    /**
-     * The route of the dropdown-item. If this is set, the dropdown-item is a {@link RouterLink}.
-     */
-    route?: RouteLocationRaw;
-    /**
-     * If set to `true` the dropdown-item is disabled and no interaction is possible.
-     * The other dropdown-items can still be clicked.
-     */
-    disabled?: boolean;
-    /**
-     * This is called when the dropdown-item is clicked.
-     * It is only called when the `route` option is not set on the item.
-     */
-    onClick?: () => void;
-};
-/**
- * The `NDropdown` consists of a button and a panel with multiple actions.
- * It is useful to group multiple actions together in one place.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NDropdown, Component as default };