primevue 4.1.0 → 4.2.0

package/treetable/BodyCell.vue

@@ -9,11 +9,11 @@
                     <SpinnerIcon v-else spin v-bind="ptm('nodetoggleicon')" />
                 </template>
                 <template v-else>
-                    <component v-if="column.children && column.children.rowtoggleicon" :is="column.children.rowtoggleicon" :node="node" :expanded="expanded" :class="cx('rowToggleIcon')" />
+                    <component v-if="column.children && column.children.rowtoggleicon" :is="column.children.rowtoggleicon" :node="node" :expanded="expanded" :class="cx('nodeToggleIcon')" />
                     <!-- TODO: Deprecated since v4.0-->
-                    <component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :node="node" :expanded="expanded" :class="cx('rowToggleIcon')" />
-                    <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('rowToggleIcon')" v-bind="getColumnPT('rowToggleIcon')" />
-                    <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('rowToggleIcon')" v-bind="getColumnPT('rowToggleIcon')" />
+                    <component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :node="node" :expanded="expanded" :class="cx('nodeToggleIcon')" />
+                    <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('nodeToggleIcon')" v-bind="getColumnPT('nodeToggleIcon')" />
+                    <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('nodeToggleIcon')" v-bind="getColumnPT('nodeToggleIcon')" />
                 </template>
             </button>
             <Checkbox
@@ -39,10 +39,10 @@
 </template>
 
 <script>
+import { getNextElementSibling, getOuterWidth, getPreviousElementSibling } from '@primeuix/utils/dom';
+import { resolveFieldData } from '@primeuix/utils/object';
 import BaseComponent from '@primevue/core/basecomponent';
 import { getVNodeProp } from '@primevue/core/utils';
-import { getNextElementSibling, getPreviousElementSibling, getOuterWidth } from '@primeuix/utils/dom';
-import { resolveFieldData } from '@primeuix/utils/object';
 import CheckIcon from '@primevue/icons/check';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import ChevronRightIcon from '@primevue/icons/chevronright';
@@ -171,26 +171,35 @@ export default {
         },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
+                let isRTL = this.$parentInstance.isRTL;
                 let align = this.columnProp('alignFrozen');
 
                 if (align === 'right') {
-                    let right = 0;
+                    let pos = 0;
                     let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
 
                     if (next) {
-                        right = getOuterWidth(next) + parseFloat(next.style.right || 0);
+                        pos = getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
 
-                    this.styleObject.right = right + 'px';
+                    if (isRTL) {
+                        this.styleObject.left = pos + 'px';
+                    } else {
+                        this.styleObject.right = pos + 'px';
+                    }
                 } else {
-                    let left = 0;
+                    let pos = 0;
                     let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
 
                     if (prev) {
-                        left = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+                        pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
 
-                    this.styleObject.left = left + 'px';
+                    if (isRTL) {
+                        this.styleObject.right = pos + 'px';
+                    } else {
+                        this.styleObject.left = pos + 'px';
+                    }
                 }
             }
         },

package/treetable/FooterCell.vue

@@ -66,26 +66,35 @@ export default {
         },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
+                let isRTL = this.$parentInstance.isRTL;
                 let align = this.columnProp('alignFrozen');
 
                 if (align === 'right') {
-                    let right = 0;
+                    let pos = 0;
                     let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
 
                     if (next) {
-                        right = getOuterWidth(next) + parseFloat(next.style.right || 0);
+                        pos = getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
 
-                    this.styleObject.right = right + 'px';
+                    if (isRTL) {
+                        this.styleObject.left = pos + 'px';
+                    } else {
+                        this.styleObject.right = pos + 'px';
+                    }
                 } else {
-                    let left = 0;
+                    let pos = 0;
                     let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
 
                     if (prev) {
-                        left = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+                        pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
 
-                    this.styleObject.left = left + 'px';
+                    if (isRTL) {
+                        this.styleObject.right = pos + 'px';
+                    } else {
+                        this.styleObject.left = pos + 'px';
+                    }
                 }
             }
         }

package/treetable/HeaderCell.vue

@@ -115,26 +115,35 @@ export default {
         },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
+                let isRTL = this.$parentInstance.isRTL;
                 let align = this.columnProp('alignFrozen');
 
                 if (align === 'right') {
-                    let right = 0;
+                    let pos = 0;
                     let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
 
                     if (next) {
-                        right = getOuterWidth(next) + parseFloat(next.style.right || 0);
+                        pos = getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
 
-                    this.styleObject.right = right + 'px';
+                    if (isRTL) {
+                        this.styleObject.left = pos + 'px';
+                    } else {
+                        this.styleObject.right = pos + 'px';
+                    }
                 } else {
-                    let left = 0;
+                    let pos = 0;
                     let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
 
                     if (prev) {
-                        left = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+                        pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
 
-                    this.styleObject.left = left + 'px';
+                    if (isRTL) {
+                        this.styleObject.right = pos + 'px';
+                    } else {
+                        this.styleObject.left = pos + 'px';
+                    }
                 }
 
                 let filterRow = this.$el.parentElement.nextElementSibling;

package/treetable/TreeTable.vue

@@ -26,6 +26,22 @@
             :unstyled="unstyled"
             :pt="ptm('pcPaginator')"
         >
+            <template v-if="$slots.paginatorcontainer" #container="slotProps">
+                <slot
+                    name="paginatorcontainer"
+                    :first="slotProps.first"
+                    :last="slotProps.last"
+                    :rows="slotProps.rows"
+                    :page="slotProps.page"
+                    :pageCount="slotProps.pageCount"
+                    :totalRecords="slotProps.totalRecords"
+                    :firstPageCallback="slotProps.firstPageCallback"
+                    :lastPageCallback="slotProps.lastPageCallback"
+                    :prevPageCallback="slotProps.prevPageCallback"
+                    :nextPageCallback="slotProps.nextPageCallback"
+                    :rowChangeCallback="slotProps.rowChangeCallback"
+                ></slot>
+            </template>
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
             </template>
@@ -138,6 +154,22 @@
             :unstyled="unstyled"
             :pt="ptm('pcPaginator')"
         >
+            <template v-if="$slots.paginatorcontainer" #container="slotProps">
+                <slot
+                    name="paginatorcontainer"
+                    :first="slotProps.first"
+                    :last="slotProps.last"
+                    :rows="slotProps.rows"
+                    :page="slotProps.page"
+                    :pageCount="slotProps.pageCount"
+                    :totalRecords="slotProps.totalRecords"
+                    :firstPageCallback="slotProps.firstPageCallback"
+                    :lastPageCallback="slotProps.lastPageCallback"
+                    :prevPageCallback="slotProps.prevPageCallback"
+                    :nextPageCallback="slotProps.nextPageCallback"
+                    :rowChangeCallback="slotProps.rowChangeCallback"
+                ></slot>
+            </template>
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
             </template>
@@ -219,13 +251,15 @@ export default {
             d_sortOrder: this.sortOrder,
             d_multiSortMeta: this.multiSortMeta ? [...this.multiSortMeta] : [],
             hasASelectedNode: false,
-            d_columns: new HelperSet({ type: 'Column' })
+            d_columns: new HelperSet({ type: 'Column' }),
+            isRTL: false
         };
     },
     documentColumnResizeListener: null,
     documentColumnResizeEndListener: null,
     lastResizeHelperX: null,
     resizeColumnElement: null,
+    mutationObserver: null,
     watch: {
         expandedKeys(newValue) {
             this.d_expandedKeys = newValue;
@@ -246,11 +280,32 @@ export default {
             this.d_multiSortMeta = newValue;
         }
     },
+    mounted() {
+        this.updateDirection();
+        this.observeDirectionChanges();
+    },
     beforeUnmount() {
         this.destroyStyleElement();
         this.d_columns.clear();
+
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
     },
     methods: {
+        updateDirection() {
+            this.isRTL = !!this.$el.closest('[dir="rtl"]');
+        },
+        observeDirectionChanges() {
+            const targetNode = document.documentElement;
+            const config = { attributes: true, attributeFilter: ['dir'] };
+
+            this.mutationObserver = new MutationObserver(() => {
+                this.updateDirection();
+            });
+
+            this.mutationObserver.observe(targetNode, config);
+        },
         columnProp(col, prop) {
             return getVNodeProp(col, prop);
         },
@@ -646,7 +701,7 @@ export default {
             this.$refs.resizeHelper.style.display = 'block';
         },
         onColumnResizeEnd() {
-            let delta = this.$refs.resizeHelper.offsetLeft - this.lastResizeHelperX;
+            let delta = this.isRTL ? this.lastResizeHelperX - this.$refs.resizeHelper.offsetLeft : this.$refs.resizeHelper.offsetLeft - this.lastResizeHelperX;
             let columnWidth = this.resizeColumnElement.offsetWidth;
             let newColumnWidth = columnWidth + delta;
             let minWidth = this.resizeColumnElement.style.minWidth || 15;

package/treetable/index.d.ts

@@ -7,7 +7,7 @@
  * @module treetable
  *
  */
-import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, HintedString, PassThrough } from '@primevue/core';
+import type { DefineComponent, DesignToken, EmitFn, HintedString, PassThrough } from '@primevue/core';
 import type { ComponentHooks } from '@primevue/core/basecomponent';
 import type { ColumnPassThroughOptionType } from 'primevue/column';
 import type { PaginatorPassThroughOptionType } from 'primevue/paginator';
@@ -658,14 +658,6 @@ export interface TreeTableSlots {
      * Custom footer template.
      */
     footer(): VNode[];
-    /**
-     * Custom paginator start template.
-     */
-    paginatorstart(): VNode[];
-    /**
-     * Custom paginator end template.
-     */
-    paginatorend(): VNode[];
     /**
      * Custom empty template.
      */
@@ -678,6 +670,18 @@ export interface TreeTableSlots {
      * Custom checkbox icon template.
      */
     checkboxicon(): VNode[];
+    /**
+     * Custom paginator container template.
+     */
+    paginatorcontainer(): VNode[];
+    /**
+     * Custom paginator start template.
+     */
+    paginatorstart(): VNode[];
+    /**
+     * Custom paginator end template.
+     */
+    paginatorend(): VNode[];
     /**
      * Custom paginator first page link icon template.
      */
@@ -849,7 +853,7 @@ declare const TreeTable: DefineComponent<TreeTableProps, TreeTableSlots, TreeTab
 
 declare module 'vue' {
     export interface GlobalComponents {
-        TreeTable: GlobalComponentConstructor<TreeTableProps, TreeTableSlots, TreeTableEmits>;
+        TreeTable: DefineComponent<TreeTableProps, TreeTableSlots, TreeTableEmits>;
     }
 }