@naptics/vue-collection 0.2.15 → 0.3.0

package/src/lib/components/NCrudModal.tsx

@@ -0,0 +1,133 @@
+import { trsl } from '../i18n'
+import { createComponentWithSlots } from '../utils/component'
+import { ref, type PropType } from 'vue'
+import NButton from './NButton'
+import type { DialogVariant, NDialogExposed } from './NDialog'
+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 as PropType<DialogVariant>,
+        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 as PropType<() => void>,
+} as const
+
+/**
+ * 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<NDialogExposed>()
+
+        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>
+                                {!props.hideRemove && (
+                                    <NButton color={props.removeColor} onClick={remove} disabled={props.removeDisabled}>
+                                        {props.removeText}
+                                    </NButton>
+                                )}
+                            </div>
+                            <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>
+                    ))
+                }
+            >
+                {slots.default?.()}
+                <NDialog
+                    ref={removeDialog}
+                    variant={props.removeDialogVariant}
+                    title={props.removeDialogTitle}
+                    text={props.removeDialogText}
+                    okText={props.removeDialogOkText}
+                />
+            </NFormModal>
+        )
+    }
+)
+
+export { Component as NCrudModal, Component as default }

package/src/lib/components/NDialog.tsx

@@ -0,0 +1,182 @@
+import { deferred, type DeferredPromise } from '../utils/deferred'
+import { createComponent, extractProps } from '../utils/component'
+import { CheckIcon, ExclamationTriangleIcon, LightBulbIcon, TrashIcon } from '@heroicons/vue/24/outline'
+import { computed, ref, type PropType } from 'vue'
+import NIconCircle from './NIconCircle'
+import NModal from './NModal'
+import { DialogTitle } from '@headlessui/vue'
+import type { HeroIcon } from '../utils/tailwind'
+import { trsl } from '../i18n'
+import { vModelForRef } from '../utils/vModel'
+
+export type DialogVariant = 'success' | 'info' | 'warning' | 'danger' | 'remove'
+
+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 as PropType<DialogVariant>,
+        default: 'warning',
+    },
+    /**
+     * The icon of the alert. This overrides the `icon` of the `variant`.
+     */
+    icon: Function as PropType<HeroIcon>,
+    /**
+     * 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,
+}
+
+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} />
+ */
+const Component = createComponent('NDialog', nDialogProps, (props, context) => {
+    const showDialog = ref(false)
+
+    let deferredPromise: DeferredPromise<boolean> | null = null
+    const show = (): Promise<boolean> => {
+        if (deferredPromise != null) {
+            deferredPromise.reject('show() was called on the open dialog.')
+            deferredPromise = null
+        }
+        showDialog.value = true
+        deferredPromise = deferred<boolean>()
+        return deferredPromise.promise
+    }
+
+    context.expose({ show })
+
+    const resolveWith = (result: boolean) => {
+        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',
+    },
+}
+
+export { Component as NDialog, Component as default }

package/src/lib/components/NDropdown.tsx

@@ -0,0 +1,167 @@
+import { createComponentWithSlots } from '../utils/component'
+import { computed, Transition, type PropType } from 'vue'
+import { RouterLink, type RouteLocationRaw } from 'vue-router'
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import { ChevronDownIcon } from '@heroicons/vue/24/solid'
+import type { HeroIcon } from '../utils/tailwind'
+
+export const nDropdownProps = {
+    /**
+     * 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 as PropType<DropdownItem[] | DropdownItem[][]>,
+        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,
+    /**
+     * Adds the classes to the Button of the dropdown.
+     */
+    buttonClass: String,
+    /**
+     * 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.
+     */
+    button: Function as PropType<(button: typeof MenuButton) => JSX.Element>,
+} as const
+
+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.
+ */
+const Component = createComponentWithSlots('NDropdown', nDropdownProps, ['button'], (props, { slots }) => {
+    const items = computed<DropdownItem[][]>(() => {
+        if (props.items.length == 0) return []
+        if (Array.isArray(props.items[0])) return props.items as DropdownItem[][]
+        else return [props.items] as DropdownItem[][]
+    })
+
+    const itemWithIcon = (item: DropdownItem) => (
+        <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) || (
+                    <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',
+                            props.buttonClass,
+                        ]}
+                    >
+                        <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 }: { active: boolean }) =>
+                                                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>
+    )
+})
+
+export { Component as NDropdown, Component as default }