primevue 4.3.1 → 4.3.3

package/dialog/Dialog.vue

@@ -1,8 +1,8 @@
 <template>
     <Portal :appendTo="appendTo">
-        <div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :style="sx('mask', true, { position, modal })" @mousedown="onMaskMouseDown" @mouseup="onMaskMouseUp" v-bind="ptm('mask')">
+        <div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :style="sx('mask', true, { position, modal })" @mousedown="onMaskMouseDown" @mouseup="onMaskMouseUp" :data-p="dataP" v-bind="ptm('mask')">
             <transition name="p-dialog" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')">
-                <div v-if="visible" :ref="containerRef" v-focustrap="{ disabled: !modal }" :class="cx('root')" :style="sx('root')" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" v-bind="ptmi('root')">
+                <div v-if="visible" :ref="containerRef" v-focustrap="{ disabled: !modal }" :class="cx('root')" :style="sx('root')" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" :data-p="dataP" v-bind="ptmi('root')">
                     <slot v-if="$slots.container" name="container" :closeCallback="close" :maximizeCallback="(event) => maximize(event)"></slot>
                     <template v-else>
                         <div v-if="showHeader" :ref="headerContainerRef" :class="cx('header')" @mousedown="initDrag" v-bind="ptm('header')">
@@ -10,45 +10,47 @@
                                 <span v-if="header" :id="ariaLabelledById" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span>
                             </slot>
                             <div :class="cx('headerActions')" v-bind="ptm('headerActions')">
-                                <Button
-                                    v-if="maximizable"
-                                    :ref="maximizableRef"
-                                    :autofocus="focusableMax"
-                                    :class="cx('pcMaximizeButton')"
-                                    @click="maximize"
-                                    :tabindex="maximizable ? '0' : '-1'"
-                                    :unstyled="unstyled"
-                                    v-bind="maximizeButtonProps"
-                                    :pt="ptm('pcMaximizeButton')"
-                                    data-pc-group-section="headericon"
-                                >
-                                    <template #icon="slotProps">
-                                        <slot name="maximizeicon" :maximized="maximized">
-                                            <component :is="maximizeIconComponent" :class="[slotProps.class, maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('pcMaximizeButton')['icon']" />
-                                        </slot>
-                                    </template>
-                                </Button>
-                                <Button
-                                    v-if="closable"
-                                    :ref="closeButtonRef"
-                                    :autofocus="focusableClose"
-                                    :class="cx('pcCloseButton')"
-                                    @click="close"
-                                    :aria-label="closeAriaLabel"
-                                    :unstyled="unstyled"
-                                    v-bind="closeButtonProps"
-                                    :pt="ptm('pcCloseButton')"
-                                    data-pc-group-section="headericon"
-                                >
-                                    <template #icon="slotProps">
-                                        <slot name="closeicon">
-                                            <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[closeIcon, slotProps.class]" v-bind="ptm('pcCloseButton')['icon']"></component>
-                                        </slot>
-                                    </template>
-                                </Button>
+                                <slot v-if="maximizable" name="maximizebutton" :maximized="maximized" :maximizeCallback="(event) => maximize(event)">
+                                    <Button
+                                        :ref="maximizableRef"
+                                        :autofocus="focusableMax"
+                                        :class="cx('pcMaximizeButton')"
+                                        @click="maximize"
+                                        :tabindex="maximizable ? '0' : '-1'"
+                                        :unstyled="unstyled"
+                                        v-bind="maximizeButtonProps"
+                                        :pt="ptm('pcMaximizeButton')"
+                                        data-pc-group-section="headericon"
+                                    >
+                                        <template #icon="slotProps">
+                                            <slot name="maximizeicon" :maximized="maximized">
+                                                <component :is="maximizeIconComponent" :class="[slotProps.class, maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('pcMaximizeButton')['icon']" />
+                                            </slot>
+                                        </template>
+                                    </Button>
+                                </slot>
+                                <slot v-if="closable" name="closebutton" :closeCallback="close">
+                                    <Button
+                                        :ref="closeButtonRef"
+                                        :autofocus="focusableClose"
+                                        :class="cx('pcCloseButton')"
+                                        @click="close"
+                                        :aria-label="closeAriaLabel"
+                                        :unstyled="unstyled"
+                                        v-bind="closeButtonProps"
+                                        :pt="ptm('pcCloseButton')"
+                                        data-pc-group-section="headericon"
+                                    >
+                                        <template #icon="slotProps">
+                                            <slot name="closeicon">
+                                                <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[closeIcon, slotProps.class]" v-bind="ptm('pcCloseButton')['icon']"></component>
+                                            </slot>
+                                        </template>
+                                    </Button>
+                                </slot>
                             </div>
                         </div>
-                        <div :ref="contentRef" :class="[cx('content'), contentClass]" :style="contentStyle" v-bind="{ ...contentProps, ...ptm('content') }">
+                        <div :ref="contentRef" :class="[cx('content'), contentClass]" :style="contentStyle" :data-p="dataP" v-bind="{ ...contentProps, ...ptm('content') }">
                             <slot></slot>
                         </div>
                         <div v-if="footer || $slots.footer" :ref="footerContainerRef" :class="cx('footer')" v-bind="ptm('footer')">
@@ -62,6 +64,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import { addClass, addStyle, focus, getOuterHeight, getOuterWidth, getViewport, setAttribute } from '@primeuix/utils/dom';
 import { ZIndex } from '@primeuix/utils/zindex';
 import TimesIcon from '@primevue/icons/times';
@@ -405,6 +408,12 @@ export default {
         },
         closeAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
+        },
+        dataP() {
+            return cn({
+                maximized: this.maximized,
+                modal: this.modal
+            });
         }
     },
     directives: {

package/dialog/index.d.ts

@@ -229,7 +229,7 @@ export interface DialogProps {
      * Position of the dialog.
      * @defaultValue center
      */
-    position?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright' | undefined;
+    position?: HintedString<'center' | 'top' | 'bottom' | 'left' | 'right' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright'> | undefined;
     /**
      * Whether the dialog can be displayed full screen.
      * @defaultValue false
@@ -329,6 +329,16 @@ export interface DialogSlots {
      * Custom footer template.
      */
     footer(): VNode[];
+    /**
+     * Custom close button template.
+     * @param {Object} scope - close button slot's params.
+     */
+    closebutton(scope: {
+        /**
+         * Close function.
+         */
+        closeCallback: () => void;
+    }): VNode[];
     /**
      * Custom close icon template.
      * @param {Object} scope - close icon slot's params.
@@ -339,6 +349,21 @@ export interface DialogSlots {
          */
         class: any;
     }): VNode[];
+    /**
+     * Custom maximize button template.
+     * @param {Object} scope - maximize button slot's params.
+     */
+    maximizebutton(scope: {
+        /**
+         * Maximized state as a boolean
+         */
+        maximized: boolean;
+        /**
+         * Toggle maximize function.
+         * @param {Event} event - Browser event
+         */
+        maximizeCallback: (event: Event) => void;
+    }): VNode[];
     /**
      * Custom maximize icon template of dialog.
      * @param {Object} scope - maximize icon slot's params.

package/dialog/index.mjs

@@ -1,3 +1,4 @@
+import { cn } from '@primeuix/utils';
 import { getOuterWidth, getOuterHeight, getViewport, addStyle, setAttribute, focus, addClass } from '@primeuix/utils/dom';
 import { ZIndex } from '@primeuix/utils/zindex';
 import TimesIcon from '@primevue/icons/times';
@@ -457,6 +458,12 @@ var script = {
     },
     closeAriaLabel: function closeAriaLabel() {
       return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
+    },
+    dataP: function dataP() {
+      return cn({
+        maximized: this.maximized,
+        modal: this.modal
+      });
     }
   },
   directives: {
@@ -478,8 +485,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var _hoisted_1 = ["aria-labelledby", "aria-modal"];
-var _hoisted_2 = ["id"];
+var _hoisted_1 = ["data-p"];
+var _hoisted_2 = ["aria-labelledby", "aria-modal", "data-p"];
+var _hoisted_3 = ["id"];
+var _hoisted_4 = ["data-p"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_Button = resolveComponent("Button");
   var _component_Portal = resolveComponent("Portal");
@@ -501,7 +510,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         }),
         onMouseup: _cache[2] || (_cache[2] = function () {
           return $options.onMaskMouseUp && $options.onMaskMouseUp.apply($options, arguments);
-        })
+        }),
+        "data-p": $options.dataP
       }, _ctx.ptm('mask')), [createVNode(Transition, mergeProps({
         name: "p-dialog",
         onEnter: $options.onEnter,
@@ -519,7 +529,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             style: _ctx.sx('root'),
             role: "dialog",
             "aria-labelledby": $options.ariaLabelledById,
-            "aria-modal": _ctx.modal
+            "aria-modal": _ctx.modal,
+            "data-p": $options.dataP
           }, _ctx.ptmi('root')), [_ctx.$slots.container ? renderSlot(_ctx.$slots, "container", {
             key: 0,
             closeCallback: $options.close,
@@ -542,67 +553,79 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               key: 0,
               id: $options.ariaLabelledById,
               "class": _ctx.cx('title')
-            }, _ctx.ptm('title')), toDisplayString(_ctx.header), 17, _hoisted_2)) : createCommentVNode("", true)];
+            }, _ctx.ptm('title')), toDisplayString(_ctx.header), 17, _hoisted_3)) : createCommentVNode("", true)];
           }), createElementVNode("div", mergeProps({
             "class": _ctx.cx('headerActions')
-          }, _ctx.ptm('headerActions')), [_ctx.maximizable ? (openBlock(), createBlock(_component_Button, mergeProps({
+          }, _ctx.ptm('headerActions')), [_ctx.maximizable ? renderSlot(_ctx.$slots, "maximizebutton", {
             key: 0,
-            ref: $options.maximizableRef,
-            autofocus: $data.focusableMax,
-            "class": _ctx.cx('pcMaximizeButton'),
-            onClick: $options.maximize,
-            tabindex: _ctx.maximizable ? '0' : '-1',
-            unstyled: _ctx.unstyled
-          }, _ctx.maximizeButtonProps, {
-            pt: _ctx.ptm('pcMaximizeButton'),
-            "data-pc-group-section": "headericon"
-          }), {
-            icon: withCtx(function (slotProps) {
-              return [renderSlot(_ctx.$slots, "maximizeicon", {
-                maximized: $data.maximized
-              }, function () {
-                return [(openBlock(), createBlock(resolveDynamicComponent($options.maximizeIconComponent), mergeProps({
-                  "class": [slotProps["class"], $data.maximized ? _ctx.minimizeIcon : _ctx.maximizeIcon]
-                }, _ctx.ptm('pcMaximizeButton')['icon']), null, 16, ["class"]))];
-              })];
-            }),
-            _: 3
-          }, 16, ["autofocus", "class", "onClick", "tabindex", "unstyled", "pt"])) : createCommentVNode("", true), _ctx.closable ? (openBlock(), createBlock(_component_Button, mergeProps({
+            maximized: $data.maximized,
+            maximizeCallback: function maximizeCallback(event) {
+              return $options.maximize(event);
+            }
+          }, function () {
+            return [createVNode(_component_Button, mergeProps({
+              ref: $options.maximizableRef,
+              autofocus: $data.focusableMax,
+              "class": _ctx.cx('pcMaximizeButton'),
+              onClick: $options.maximize,
+              tabindex: _ctx.maximizable ? '0' : '-1',
+              unstyled: _ctx.unstyled
+            }, _ctx.maximizeButtonProps, {
+              pt: _ctx.ptm('pcMaximizeButton'),
+              "data-pc-group-section": "headericon"
+            }), {
+              icon: withCtx(function (slotProps) {
+                return [renderSlot(_ctx.$slots, "maximizeicon", {
+                  maximized: $data.maximized
+                }, function () {
+                  return [(openBlock(), createBlock(resolveDynamicComponent($options.maximizeIconComponent), mergeProps({
+                    "class": [slotProps["class"], $data.maximized ? _ctx.minimizeIcon : _ctx.maximizeIcon]
+                  }, _ctx.ptm('pcMaximizeButton')['icon']), null, 16, ["class"]))];
+                })];
+              }),
+              _: 3
+            }, 16, ["autofocus", "class", "onClick", "tabindex", "unstyled", "pt"])];
+          }) : createCommentVNode("", true), _ctx.closable ? renderSlot(_ctx.$slots, "closebutton", {
             key: 1,
-            ref: $options.closeButtonRef,
-            autofocus: $data.focusableClose,
-            "class": _ctx.cx('pcCloseButton'),
-            onClick: $options.close,
-            "aria-label": $options.closeAriaLabel,
-            unstyled: _ctx.unstyled
-          }, _ctx.closeButtonProps, {
-            pt: _ctx.ptm('pcCloseButton'),
-            "data-pc-group-section": "headericon"
-          }), {
-            icon: withCtx(function (slotProps) {
-              return [renderSlot(_ctx.$slots, "closeicon", {}, function () {
-                return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.closeIcon ? 'span' : 'TimesIcon'), mergeProps({
-                  "class": [_ctx.closeIcon, slotProps["class"]]
-                }, _ctx.ptm('pcCloseButton')['icon']), null, 16, ["class"]))];
-              })];
-            }),
-            _: 3
-          }, 16, ["autofocus", "class", "onClick", "aria-label", "unstyled", "pt"])) : createCommentVNode("", true)], 16)], 16)) : createCommentVNode("", true), createElementVNode("div", mergeProps({
+            closeCallback: $options.close
+          }, function () {
+            return [createVNode(_component_Button, mergeProps({
+              ref: $options.closeButtonRef,
+              autofocus: $data.focusableClose,
+              "class": _ctx.cx('pcCloseButton'),
+              onClick: $options.close,
+              "aria-label": $options.closeAriaLabel,
+              unstyled: _ctx.unstyled
+            }, _ctx.closeButtonProps, {
+              pt: _ctx.ptm('pcCloseButton'),
+              "data-pc-group-section": "headericon"
+            }), {
+              icon: withCtx(function (slotProps) {
+                return [renderSlot(_ctx.$slots, "closeicon", {}, function () {
+                  return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.closeIcon ? 'span' : 'TimesIcon'), mergeProps({
+                    "class": [_ctx.closeIcon, slotProps["class"]]
+                  }, _ctx.ptm('pcCloseButton')['icon']), null, 16, ["class"]))];
+                })];
+              }),
+              _: 3
+            }, 16, ["autofocus", "class", "onClick", "aria-label", "unstyled", "pt"])];
+          }) : createCommentVNode("", true)], 16)], 16)) : createCommentVNode("", true), createElementVNode("div", mergeProps({
             ref: $options.contentRef,
             "class": [_ctx.cx('content'), _ctx.contentClass],
-            style: _ctx.contentStyle
-          }, _objectSpread(_objectSpread({}, _ctx.contentProps), _ctx.ptm('content'))), [renderSlot(_ctx.$slots, "default")], 16), _ctx.footer || _ctx.$slots.footer ? (openBlock(), createElementBlock("div", mergeProps({
+            style: _ctx.contentStyle,
+            "data-p": $options.dataP
+          }, _objectSpread(_objectSpread({}, _ctx.contentProps), _ctx.ptm('content'))), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_4), _ctx.footer || _ctx.$slots.footer ? (openBlock(), createElementBlock("div", mergeProps({
             key: 1,
             ref: $options.footerContainerRef,
             "class": _ctx.cx('footer')
           }, _ctx.ptm('footer')), [renderSlot(_ctx.$slots, "footer", {}, function () {
             return [createTextVNode(toDisplayString(_ctx.footer), 1)];
-          })], 16)) : createCommentVNode("", true)], 64))], 16, _hoisted_1)), [[_directive_focustrap, {
+          })], 16)) : createCommentVNode("", true)], 64))], 16, _hoisted_2)), [[_directive_focustrap, {
             disabled: !_ctx.modal
           }]]) : createCommentVNode("", true)];
         }),
         _: 3
-      }, 16, ["onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"])], 16)) : createCommentVNode("", true)];
+      }, 16, ["onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"])], 16, _hoisted_1)) : createCommentVNode("", true)];
     }),
     _: 3
   }, 8, ["appendTo"]);