@naptics/vue-collection 0.0.1

package/lib/components/NDialog.jsx

@@ -0,0 +1,144 @@
+import { deferred } from '../utils/deferred';
+import { createComponent, createProps, 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 = createProps({
+    /**
+     * 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} />
+ */
+export default 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 () => (<NModal {...vModelForRef(showDialog)} {...extractProps(props, 'cancelColor', 'cancelText', 'hideCancel')} onOk={ok} onCancel={cancel} okColor={props.okColor || defaults.value.okColor} okText={props.okText || defaults.value.okText} hideX hideHeader>
+            <div class="flex space-x-4 py-2">
+                <div class="flex-grow-0">
+                    <NIconCircle icon={props.icon || defaults.value.icon} iconSize={6} color={props.iconColor || defaults.value.iconColor}/>
+                </div>
+
+                <div class="flex-grow">
+                    <DialogTitle as="h4" class="font-medium text-lg text-default-700 mb-1">
+                        {props.title}
+                    </DialogTitle>
+                    {context.slots.default?.() || <p class="text-sm text-default-500">{props.text}</p>}
+                </div>
+            </div>
+        </NModal>);
+});
+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',
+    },
+};

package/lib/components/NDropdown.d.ts

@@ -0,0 +1,116 @@
+import { type PropType } from 'vue';
+import { type RouteLocationRaw } from 'vue-router';
+import type { HeroIcon } from '../utils/utils';
+export declare const nDropdownProps: {
+    /**
+     * The title of the dropdown-button.
+     */
+    title: StringConstructor;
+    /**
+     * The items of the dropdown.
+     * The second dimension of the array is used
+     * to create groups of items, which are visually seperated.
+     */
+    items: {
+        type: PropType<DropdownItem[] | DropdownItem[][]>;
+        default: () => never[];
+    };
+    /**
+     * If set to `true` the panel is right-aligned to the button.
+     */
+    right: BooleanConstructor;
+    /**
+     * If set to `true` the dropdown-button is disabled and no interaction is possible.
+     */
+    disabled: BooleanConstructor;
+    /**
+     * A slot to replace the button of the dropdown.
+     */
+    button: PropType<() => 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 _default: import("vue").DefineComponent<{
+    /**
+     * The title of the dropdown-button.
+     */
+    title: StringConstructor;
+    /**
+     * The items of the dropdown.
+     * The second dimension of the array is used
+     * to create groups of items, which are visually seperated.
+     */
+    items: {
+        type: PropType<DropdownItem[] | DropdownItem[][]>;
+        default: () => never[];
+    };
+    /**
+     * If set to `true` the panel is right-aligned to the button.
+     */
+    right: BooleanConstructor;
+    /**
+     * If set to `true` the dropdown-button is disabled and no interaction is possible.
+     */
+    disabled: BooleanConstructor;
+    /**
+     * A slot to replace the button of the dropdown.
+     */
+    button: PropType<() => JSX.Element>;
+}, 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 dropdown-button.
+     */
+    title: StringConstructor;
+    /**
+     * The items of the dropdown.
+     * The second dimension of the array is used
+     * to create groups of items, which are visually seperated.
+     */
+    items: {
+        type: PropType<DropdownItem[] | DropdownItem[][]>;
+        default: () => never[];
+    };
+    /**
+     * If set to `true` the panel is right-aligned to the button.
+     */
+    right: BooleanConstructor;
+    /**
+     * If set to `true` the dropdown-button is disabled and no interaction is possible.
+     */
+    disabled: BooleanConstructor;
+    /**
+     * A slot to replace the button of the dropdown.
+     */
+    button: PropType<() => JSX.Element>;
+}>> & {}, {
+    right: boolean;
+    disabled: boolean;
+    items: DropdownItem[] | DropdownItem[][];
+}>;
+export default _default;

package/lib/components/NDropdown.jsx

@@ -0,0 +1,92 @@
+import { createComponent, createProps } from '../utils/component';
+import { computed, Transition } from 'vue';
+import { RouterLink } from 'vue-router';
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
+import { ChevronDownIcon } from '@heroicons/vue/24/solid';
+export const nDropdownProps = createProps({
+    /**
+     * The title of the dropdown-button.
+     */
+    title: String,
+    /**
+     * The items of the dropdown.
+     * The second dimension of the array is used
+     * to create groups of items, which are visually seperated.
+     */
+    items: {
+        type: Array,
+        default: () => [],
+    },
+    /**
+     * If set to `true` the panel is right-aligned to the button.
+     */
+    right: Boolean,
+    /**
+     * If set to `true` the dropdown-button is disabled and no interaction is possible.
+     */
+    disabled: Boolean,
+    /**
+     * A slot to replace the button of the dropdown.
+     */
+    button: Function,
+});
+/**
+ * The `NDropdown` consists of a button and a panel with multiple actions.
+ * It is useful to group multiple actions together in one place.
+ */
+export default createComponent('NDropdown', nDropdownProps, (props, { slots }) => {
+    const items = computed(() => {
+        if (props.items.length == 0)
+            return [];
+        if (Array.isArray(props.items[0]))
+            return props.items;
+        else
+            return [props.items];
+    });
+    const itemWithIcon = (item) => (<div class="flex space-x-3 items-center">
+            {item.icon && <item.icon class={['h-5 w-5', item.disabled ? 'text-default-300' : 'text-default-400']}/>}
+            <span>{item.label}</span>
+        </div>);
+    return () => (<Menu as="div" class="relative inline-block text-left">
+            <div class="flex">
+                {props.button?.() || (<MenuButton disabled={props.disabled} class={[
+                'shadow w-full flex justify-between items-center text-default-700 rounded-md border bg-white border-default-300 px-4 py-2 text-sm font-medium focus:outline-none focus:ring-offset-2 focus-visible:ring-2 focus-visible:ring-primary-500',
+                props.disabled ? 'text-opacity-20 cursor-default' : 'hover:bg-default-100',
+            ]}>
+                        <span>{props.title}</span>
+                        <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5 flex-shrink-0" aria-hidden="true"/>
+                    </MenuButton>)}
+            </div>
+
+            <Transition enterActiveClass="transition ease-out duration-100" enterFromClass="transform opacity-0 scale-95" enterToClass="transform opacity-100 scale-100" leaveActiveClass="transition ease-in duration-75" leaveFromClass="transform opacity-100 scale-100" leaveToClass="transform opacity-0 scale-95">
+                <MenuItems class={[
+            'z-10 absolute w-56 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none',
+            props.right ? 'origin-top-right right-0' : 'origin-top-left left-0',
+        ]}>
+                    {slots.default?.() || (<div class="divide-y divide-default-200">
+                            {items.value.map((group, index) => (<div key={`group-${index}`} class="py-1">
+                                    {group.map((item, index) => (<MenuItem key={`item-${index}`} disabled={item.disabled}>
+                                            {({ active }) => item.disabled ? (<div class="block px-4 py-2 text-sm text-default-300">
+                                                        {itemWithIcon(item)}
+                                                    </div>) : item.route ? (<RouterLink to={item.route} class={[
+                            'block px-4 py-2 text-sm',
+                            active
+                                ? 'bg-default-100 text-default-900'
+                                : 'text-default-700',
+                        ]}>
+                                                        {itemWithIcon(item)}
+                                                    </RouterLink>) : (<button type="button" onClick={item.onClick} class={[
+                            'w-full text-left px-4 py-2 text-sm',
+                            active
+                                ? 'bg-default-100 text-default-900'
+                                : 'text-default-700',
+                        ]}>
+                                                        {itemWithIcon(item)}
+                                                    </button>)}
+                                        </MenuItem>))}
+                                </div>))}
+                        </div>)}
+                </MenuItems>
+            </Transition>
+        </Menu>);
+});

package/lib/components/NDropzone.d.ts

@@ -0,0 +1,162 @@
+export declare const nDropzoneProps: {
+    /**
+     * A description which files are allowed for this dropzone.
+     * This should include everything the user needs to know about
+     * the file type / the extensions and the maximum size of the file.
+     * @see {@link nDropzoneProps.accept}
+     * @see {@link nDropzoneProps.maxFileSize}
+     */
+    description: StringConstructor;
+    /**
+     * The maximum amount of files which can be added to the dropzone.
+     */
+    maxFiles: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * Specifies which file types are accepted. The same syntax as with inputs of type file is used.
+     * Make sure to explain the requirements to the user in the {@link nDropzoneProps.description}.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
+     */
+    accept: StringConstructor;
+    /**
+     * Specifies the maximum size of an individual file in bytes.
+     * Make sure to explain the max size to the user in the {@link nDropzoneProps.description}.
+     */
+    maxFileSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The maximum length of the file names.
+     * Files names longer than the specified amount of characters will be shortened.
+     * @see {@link maxLengthSplitCenter}
+     */
+    maxLengthFileNames: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * A tailwind height class, which is applied to the dropzone area.
+     * It is recommended to use `min-h-*` classes,
+     * so the box is always large enough to display it's text.
+     */
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    value: import("vue").PropType<File[]>;
+    onUpdateValue: import("vue").PropType<(newValue: File[]) => void>;
+};
+/**
+ * The `NDropzone` is an area where files can be added by the user by drag & drop.
+ * Files can also be selected with a file chooser by clicking on the dropzone.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * A description which files are allowed for this dropzone.
+     * This should include everything the user needs to know about
+     * the file type / the extensions and the maximum size of the file.
+     * @see {@link nDropzoneProps.accept}
+     * @see {@link nDropzoneProps.maxFileSize}
+     */
+    description: StringConstructor;
+    /**
+     * The maximum amount of files which can be added to the dropzone.
+     */
+    maxFiles: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * Specifies which file types are accepted. The same syntax as with inputs of type file is used.
+     * Make sure to explain the requirements to the user in the {@link nDropzoneProps.description}.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
+     */
+    accept: StringConstructor;
+    /**
+     * Specifies the maximum size of an individual file in bytes.
+     * Make sure to explain the max size to the user in the {@link nDropzoneProps.description}.
+     */
+    maxFileSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The maximum length of the file names.
+     * Files names longer than the specified amount of characters will be shortened.
+     * @see {@link maxLengthSplitCenter}
+     */
+    maxLengthFileNames: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * A tailwind height class, which is applied to the dropzone area.
+     * It is recommended to use `min-h-*` classes,
+     * so the box is always large enough to display it's text.
+     */
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    value: import("vue").PropType<File[]>;
+    onUpdateValue: import("vue").PropType<(newValue: File[]) => 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<{
+    /**
+     * A description which files are allowed for this dropzone.
+     * This should include everything the user needs to know about
+     * the file type / the extensions and the maximum size of the file.
+     * @see {@link nDropzoneProps.accept}
+     * @see {@link nDropzoneProps.maxFileSize}
+     */
+    description: StringConstructor;
+    /**
+     * The maximum amount of files which can be added to the dropzone.
+     */
+    maxFiles: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * Specifies which file types are accepted. The same syntax as with inputs of type file is used.
+     * Make sure to explain the requirements to the user in the {@link nDropzoneProps.description}.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
+     */
+    accept: StringConstructor;
+    /**
+     * Specifies the maximum size of an individual file in bytes.
+     * Make sure to explain the max size to the user in the {@link nDropzoneProps.description}.
+     */
+    maxFileSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The maximum length of the file names.
+     * Files names longer than the specified amount of characters will be shortened.
+     * @see {@link maxLengthSplitCenter}
+     */
+    maxLengthFileNames: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * A tailwind height class, which is applied to the dropzone area.
+     * It is recommended to use `min-h-*` classes,
+     * so the box is always large enough to display it's text.
+     */
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    value: import("vue").PropType<File[]>;
+    onUpdateValue: import("vue").PropType<(newValue: File[]) => void>;
+}>> & {}, {
+    maxFiles: number;
+    maxFileSize: number;
+    maxLengthFileNames: number;
+    height: string;
+}>;
+export default _default;