primevuelab 4.0.0-beta.4

package/confirmdialog/ConfirmDialog.d.ts

@@ -0,0 +1,291 @@
+/**
+ *
+ * ConfirmDialog uses a Dialog UI with confirmDialog method or <ConfirmDialog> tag.
+ *
+ * [Live Demo](https://www.primevuelab.org/confirmdialog)
+ *
+ * @module confirmdialog
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../../../core/src/basecomponent';
+import { ButtonPassThroughOptions } from '../button';
+import { ConfirmationOptions } from '../confirmationoptions';
+import { PassThroughOptions } from '../passthrough';
+import { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type ConfirmDialogPassThroughOptionType = ConfirmDialogPassThroughAttributes | ((options: ConfirmDialogPassThroughMethodOptions) => ConfirmDialogPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ConfirmDialogPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: ConfirmDialogProps;
+    /**
+     * Defines current inline state.
+     */
+    state: ConfirmDialogState;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface ConfirmDialogSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: ConfirmDialogProps;
+    /**
+     * Defines current inline state.
+     */
+    state: ConfirmDialogState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ConfirmDialogProps.pt}
+ */
+export interface ConfirmDialogPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: ConfirmDialogPassThroughOptionType;
+    /**
+     * Used to pass attributes to the header's DOM element.
+     */
+    header?: ConfirmDialogPassThroughOptionType;
+    /**
+     * Used to pass attributes to the header title's DOM element.
+     */
+    title?: ConfirmDialogPassThroughOptionType;
+    /**
+     * Used to pass attributes to the header icons' DOM element.
+     */
+    icons?: ConfirmDialogPassThroughOptionType;
+    /**
+     * Used to pass attributes to the close button's component.
+     */
+    closeButton?: ConfirmDialogPassThroughOptionType;
+    /**
+     * Used to pass attributes to the close button icon's component.
+     */
+    closeButtonIcon?: ConfirmDialogPassThroughOptionType;
+    /**
+     * Used to pass attributes to the content's DOM element.
+     */
+    content?: ConfirmDialogPassThroughOptionType;
+    /**
+     * Used to pass attributes to the icon's DOM element.
+     */
+    icon?: ConfirmDialogPassThroughOptionType;
+    /**
+     * Used to pass attributes to the message's DOM element.
+     */
+    message?: ConfirmDialogPassThroughOptionType;
+    /**
+     * Used to pass attributes to the footer's DOM element.
+     */
+    footer?: ConfirmDialogPassThroughOptionType;
+    /**
+     * Used to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    pcRejectButton?: ButtonPassThroughOptions<ConfirmDialogSharedPassThroughMethodOptions>;
+    /**
+     * Used to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    pcAcceptButton?: ButtonPassThroughOptions<ConfirmDialogSharedPassThroughMethodOptions>;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ConfirmDialogPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in ConfirmDialog component.
+ */
+export interface ConfirmDialogState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+    /**
+     * Current confirmation message.
+     */
+    confirmation: any;
+}
+
+/**
+ * Breakpoint metadata.
+ */
+export interface ConfirmDialogBreakpoints {
+    /**
+     * Breakpoint for responsive mode.
+     *
+     * Example:
+     *
+     * <ConfirmDialog :breakpoints="{'960px': '75vw', '640px': '100vw'}" ... />
+     *
+     * Result:
+     *
+     * @media screen and (max-width: ${breakpoint[key]}) {
+     *      .p-dialog[attributeSelector] {
+     *          width: ${breakpoint[value]};
+     *      }
+     * }
+     */
+    [key: string]: string;
+}
+
+/**
+ * Defines valid properties in ConfirmDialog component.
+ */
+export interface ConfirmDialogProps {
+    /**
+     * Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.
+     */
+    group?: string | undefined;
+    /**
+     * Object literal to define widths per screen size.
+     * @see ConfirmDialogBreakpoints
+     */
+    breakpoints?: ConfirmDialogBreakpoints;
+    /**
+     * Enables dragging to change the position using header.
+     * @defaultValue true
+     */
+    draggable?: boolean | undefined;
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {ConfirmDialogPassThroughOptions}
+     */
+    pt?: PassThrough<ConfirmDialogPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines valid slots in ConfirmDialog component.
+ */
+export interface ConfirmDialogSlots {
+    /**
+     * Custom message template.
+     * @param {Object} scope - message slot's params.
+     */
+    message(scope: {
+        /**
+         * Message of the component
+         */
+        message: ConfirmationOptions;
+    }): VNode[];
+    /**
+     * Custom icon template.
+     * @param {Object} scope - icon slot's params.
+     */
+    icon(scope: {
+        /**
+         * Style class of the icon template
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom icon template.
+     */
+    accepticon(): VNode[];
+    /**
+     * Custom icon template.
+     */
+    rejecticon(): VNode[];
+    /**
+     * Custom container slot.
+     * @param {Object} scope - container slot's params.
+     */
+    container(scope: {
+        /**
+         * Message of the component
+         */
+        message: any;
+        /**
+         * Close dialog function.
+         */
+        closeCallback: () => void;
+        /**
+         * Accept function of the component
+         */
+        acceptCallback: () => void;
+        /**
+         * Reject function of the component
+         */
+        rejectCallback: () => void;
+    }): VNode[];
+}
+
+/**
+ * Defines valid emits in ConfirmDialog component.
+ */
+export interface ConfirmDialogEmitsOptions {}
+
+export declare type ConfirmDialogEmits = EmitFn<ConfirmDialogEmitsOptions>;
+
+/**
+ * **primevuelab - ConfirmDialog**
+ *
+ * _ConfirmDialog uses a Dialog UI with confirmDialog method or <ConfirmDialog> tag._
+ *
+ * [Live Demo](https://www.primevuelab.org/confirmdialog/)
+ * --- ---
+ * ![primevuelab](https://primefaces.org/cdn/primevuelab/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare const ConfirmDialog: DefineComponent<ConfirmDialogProps, ConfirmDialogSlots, ConfirmDialogEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        ConfirmDialog: GlobalComponentConstructor<ConfirmDialogProps, ConfirmDialogSlots, ConfirmDialogEmits>;
+    }
+}
+
+export default ConfirmDialog;

package/confirmdialog/ConfirmDialog.vue

@@ -0,0 +1,182 @@
+<template>
+    <Dialog
+        v-model:visible="visible"
+        role="alertdialog"
+        :class="cx('root')"
+        :modal="true"
+        :header="header"
+        :blockScroll="blockScroll"
+        :position="position"
+        :breakpoints="breakpoints"
+        :closeOnEscape="closeOnEscape"
+        :draggable="draggable"
+        @update:visible="onHide"
+        :pt="pt"
+        :unstyled="unstyled"
+    >
+        <template v-if="$slots.container" #container="slotProps">
+            <slot name="container" :message="confirmation" :closeCallback="slotProps.onclose" :acceptCallback="accept" :rejectCallback="reject" />
+        </template>
+        <template v-if="!$slots.container">
+            <template v-if="!$slots.message">
+                <slot name="icon">
+                    <component v-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" />
+                    <span v-else-if="confirmation.icon" :class="[confirmation.icon, cx('icon')]" v-bind="ptm('icon')" />
+                </slot>
+                <span :class="cx('message')" v-bind="ptm('message')">{{ message }}</span>
+            </template>
+            <component v-else :is="$slots.message" :message="confirmation"></component>
+        </template>
+        <template v-if="!$slots.container" #footer>
+            <Button
+                :class="[cx('pcRejectButton'), confirmation.rejectClass]"
+                :autofocus="autoFocusReject"
+                :unstyled="unstyled"
+                :text="confirmation.rejectProps?.text || false"
+                @click="reject()"
+                v-bind="confirmation.rejectProps"
+                :label="rejectLabel"
+                :pt="ptm('pcRejectButton')"
+            >
+                <template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
+                    <slot name="rejecticon">
+                        <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('pcRejectButton')['icon']" data-pc-section="rejectbuttonicon" />
+                    </slot>
+                </template>
+            </Button>
+            <Button :label="acceptLabel" :class="[cx('pcAcceptButton'), confirmation.acceptClass]" :autofocus="autoFocusAccept" :unstyled="unstyled" @click="accept()" v-bind="confirmation.acceptProps" :pt="ptm('pcAcceptButton')">
+                <template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
+                    <slot name="accepticon">
+                        <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('pcAcceptButton')['icon']" data-pc-section="acceptbuttonicon" />
+                    </slot>
+                </template>
+            </Button>
+        </template>
+    </Dialog>
+</template>
+
+<script>
+import Button from 'primevuelab/button';
+import ConfirmationEventBus from 'primevuelab/confirmationeventbus';
+import Dialog from 'primevuelab/dialog';
+import BaseConfirmDialog from './BaseConfirmDialog.vue';
+
+export default {
+    name: 'ConfirmDialog',
+    extends: BaseConfirmDialog,
+    confirmListener: null,
+    closeListener: null,
+    data() {
+        return {
+            visible: false,
+            confirmation: null
+        };
+    },
+    mounted() {
+        this.confirmListener = (options) => {
+            if (!options) {
+                return;
+            }
+
+            if (options.group === this.group) {
+                this.confirmation = options;
+
+                if (this.confirmation.onShow) {
+                    this.confirmation.onShow();
+                }
+
+                this.visible = true;
+            }
+        };
+
+        this.closeListener = () => {
+            this.visible = false;
+            this.confirmation = null;
+        };
+
+        ConfirmationEventBus.on('confirm', this.confirmListener);
+        ConfirmationEventBus.on('close', this.closeListener);
+    },
+    beforeUnmount() {
+        ConfirmationEventBus.off('confirm', this.confirmListener);
+        ConfirmationEventBus.off('close', this.closeListener);
+    },
+    methods: {
+        accept() {
+            if (this.confirmation.accept) {
+                this.confirmation.accept();
+            }
+
+            this.visible = false;
+        },
+        reject() {
+            if (this.confirmation.reject) {
+                this.confirmation.reject();
+            }
+
+            this.visible = false;
+        },
+        onHide() {
+            if (this.confirmation.onHide) {
+                this.confirmation.onHide();
+            }
+
+            this.visible = false;
+        },
+        getCXOptions(icon, iconProps) {
+            return { contenxt: { icon, iconClass: iconProps.class } };
+        }
+    },
+    computed: {
+        header() {
+            return this.confirmation ? this.confirmation.header : null;
+        },
+        message() {
+            return this.confirmation ? this.confirmation.message : null;
+        },
+        blockScroll() {
+            return this.confirmation ? this.confirmation.blockScroll : true;
+        },
+        position() {
+            return this.confirmation ? this.confirmation.position : null;
+        },
+        acceptLabel() {
+            if (this.confirmation) {
+                const confirmation = this.confirmation;
+
+                return confirmation.acceptLabel ? confirmation.acceptLabel : confirmation.acceptProps ? confirmation.acceptProps.label || this.$primevue.config.locale.accept : null;
+            }
+
+            return null;
+        },
+        rejectLabel() {
+            if (this.confirmation) {
+                const confirmation = this.confirmation;
+
+                return confirmation.rejectLabel ? confirmation.rejectLabel : confirmation.rejectProps ? confirmation.rejectProps.label || this.$primevue.config.locale.reject : null;
+            }
+
+            return null;
+        },
+        acceptIcon() {
+            return this.confirmation ? this.confirmation.acceptIcon : this.confirmation?.acceptProps ? this.confirmation.acceptProps.icon : null;
+        },
+        rejectIcon() {
+            return this.confirmation ? this.confirmation.rejectIcon : this.confirmation?.rejectProps ? this.confirmation.rejectProps.icon : null;
+        },
+        autoFocusAccept() {
+            return this.confirmation.defaultFocus === undefined || this.confirmation.defaultFocus === 'accept' ? true : false;
+        },
+        autoFocusReject() {
+            return this.confirmation.defaultFocus === 'reject' ? true : false;
+        },
+        closeOnEscape() {
+            return this.confirmation ? this.confirmation.closeOnEscape : true;
+        }
+    },
+    components: {
+        Dialog,
+        Button
+    }
+};
+</script>