primevue 4.1.1 → 4.2.0

package/treetable/index.mjs

@@ -261,21 +261,30 @@ var script$4 = {
     },
     updateStickyPosition: function updateStickyPosition() {
       if (this.columnProp('frozen')) {
+        var isRTL = this.$parentInstance.isRTL;
         var align = this.columnProp('alignFrozen');
         if (align === 'right') {
-          var right = 0;
+          var pos = 0;
           var 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);
+          }
+          if (isRTL) {
+            this.styleObject.left = pos + 'px';
+          } else {
+            this.styleObject.right = pos + 'px';
           }
-          this.styleObject.right = right + 'px';
         } else {
-          var left = 0;
+          var _pos = 0;
           var 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);
+          }
+          if (isRTL) {
+            this.styleObject.right = _pos + 'px';
+          } else {
+            this.styleObject.left = _pos + 'px';
           }
-          this.styleObject.left = left + 'px';
         }
       }
     }
@@ -399,21 +408,30 @@ var script$3 = {
     },
     updateStickyPosition: function updateStickyPosition() {
       if (this.columnProp('frozen')) {
+        var isRTL = this.$parentInstance.isRTL;
         var align = this.columnProp('alignFrozen');
         if (align === 'right') {
-          var right = 0;
+          var pos = 0;
           var 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);
+          }
+          if (isRTL) {
+            this.styleObject.left = pos + 'px';
+          } else {
+            this.styleObject.right = pos + 'px';
           }
-          this.styleObject.right = right + 'px';
         } else {
-          var left = 0;
+          var _pos = 0;
           var 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);
+          }
+          if (isRTL) {
+            this.styleObject.right = _pos + 'px';
+          } else {
+            this.styleObject.left = _pos + 'px';
           }
-          this.styleObject.left = left + 'px';
         }
         var filterRow = this.$el.parentElement.nextElementSibling;
         if (filterRow) {
@@ -691,21 +709,30 @@ var script$2 = {
     },
     updateStickyPosition: function updateStickyPosition() {
       if (this.columnProp('frozen')) {
+        var isRTL = this.$parentInstance.isRTL;
         var align = this.columnProp('alignFrozen');
         if (align === 'right') {
-          var right = 0;
+          var pos = 0;
           var 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);
+          }
+          if (isRTL) {
+            this.styleObject.left = pos + 'px';
+          } else {
+            this.styleObject.right = pos + 'px';
           }
-          this.styleObject.right = right + 'px';
         } else {
-          var left = 0;
+          var _pos = 0;
           var 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);
+          }
+          if (isRTL) {
+            this.styleObject.right = _pos + 'px';
+          } else {
+            this.styleObject.left = _pos + 'px';
           }
-          this.styleObject.left = left + 'px';
         }
       }
     },
@@ -793,19 +820,19 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     key: 0,
     node: $props.node,
     expanded: $props.expanded,
-    "class": normalizeClass(_ctx.cx('rowToggleIcon'))
+    "class": normalizeClass(_ctx.cx('nodeToggleIcon'))
   }, null, 8, ["node", "expanded", "class"])) : createCommentVNode("", true), $props.column.children && $props.column.children.rowtogglericon ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.rowtogglericon), {
     key: 1,
     node: $props.node,
     expanded: $props.expanded,
-    "class": normalizeClass(_ctx.cx('rowToggleIcon'))
+    "class": normalizeClass(_ctx.cx('nodeToggleIcon'))
   }, null, 8, ["node", "expanded", "class"])) : $props.expanded ? (openBlock(), createBlock(resolveDynamicComponent($props.node.expandedIcon ? 'span' : 'ChevronDownIcon'), mergeProps({
     key: 2,
-    "class": _ctx.cx('rowToggleIcon')
-  }, $options.getColumnPT('rowToggleIcon')), null, 16, ["class"])) : (openBlock(), createBlock(resolveDynamicComponent($props.node.collapsedIcon ? 'span' : 'ChevronRightIcon'), mergeProps({
+    "class": _ctx.cx('nodeToggleIcon')
+  }, $options.getColumnPT('nodeToggleIcon')), null, 16, ["class"])) : (openBlock(), createBlock(resolveDynamicComponent($props.node.collapsedIcon ? 'span' : 'ChevronRightIcon'), mergeProps({
     key: 3,
-    "class": _ctx.cx('rowToggleIcon')
-  }, $options.getColumnPT('rowToggleIcon')), null, 16, ["class"]))], 64))], 16)), [[_directive_ripple]]) : createCommentVNode("", true), $options.checkboxSelectionMode && $options.columnProp('expander') ? (openBlock(), createBlock(_component_Checkbox, {
+    "class": _ctx.cx('nodeToggleIcon')
+  }, $options.getColumnPT('nodeToggleIcon')), null, 16, ["class"]))], 64))], 16)), [[_directive_ripple]]) : createCommentVNode("", true), $options.checkboxSelectionMode && $options.columnProp('expander') ? (openBlock(), createBlock(_component_Checkbox, {
     key: 1,
     modelValue: $props.checked,
     binary: true,
@@ -1369,13 +1396,15 @@ var script = {
       hasASelectedNode: false,
       d_columns: new HelperSet({
         type: 'Column'
-      })
+      }),
+      isRTL: false
     };
   },
   documentColumnResizeListener: null,
   documentColumnResizeEndListener: null,
   lastResizeHelperX: null,
   resizeColumnElement: null,
+  mutationObserver: null,
   watch: {
     expandedKeys: function expandedKeys(newValue) {
       this.d_expandedKeys = newValue;
@@ -1396,11 +1425,33 @@ var script = {
       this.d_multiSortMeta = newValue;
     }
   },
+  mounted: function mounted() {
+    this.updateDirection();
+    this.observeDirectionChanges();
+  },
   beforeUnmount: function beforeUnmount() {
     this.destroyStyleElement();
     this.d_columns.clear();
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
   },
   methods: {
+    updateDirection: function updateDirection() {
+      this.isRTL = !!this.$el.closest('[dir="rtl"]');
+    },
+    observeDirectionChanges: function observeDirectionChanges() {
+      var _this = this;
+      var targetNode = document.documentElement;
+      var config = {
+        attributes: true,
+        attributeFilter: ['dir']
+      };
+      this.mutationObserver = new MutationObserver(function () {
+        _this.updateDirection();
+      });
+      this.mutationObserver.observe(targetNode, config);
+    },
     columnProp: function columnProp(col, prop) {
       return getVNodeProp(col, prop);
     },
@@ -1583,13 +1634,13 @@ var script = {
       return this.sortNodesSingle(nodes);
     },
     sortNodesSingle: function sortNodesSingle(nodes) {
-      var _this = this;
+      var _this2 = this;
       var _nodes = _toConsumableArray(nodes);
       var comparer = localeComparator();
       _nodes.sort(function (node1, node2) {
-        var value1 = resolveFieldData(node1.data, _this.d_sortField);
-        var value2 = resolveFieldData(node2.data, _this.d_sortField);
-        return sort(value1, value2, _this.d_sortOrder, comparer);
+        var value1 = resolveFieldData(node1.data, _this2.d_sortField);
+        var value2 = resolveFieldData(node2.data, _this2.d_sortField);
+        return sort(value1, value2, _this2.d_sortOrder, comparer);
       });
       return _nodes;
     },
@@ -1597,10 +1648,10 @@ var script = {
       return this.sortNodesMultiple(nodes);
     },
     sortNodesMultiple: function sortNodesMultiple(nodes) {
-      var _this2 = this;
+      var _this3 = this;
       var _nodes = _toConsumableArray(nodes);
       _nodes.sort(function (node1, node2) {
-        return _this2.multisortField(node1, node2, 0);
+        return _this3.multisortField(node1, node2, 0);
       });
       return _nodes;
     },
@@ -1737,13 +1788,13 @@ var script = {
       return node.leaf === false ? false : !(node.children && node.children.length);
     },
     createLazyLoadEvent: function createLazyLoadEvent(event) {
-      var _this3 = this;
+      var _this4 = this;
       var filterMatchModes;
       if (this.hasFilters()) {
         filterMatchModes = {};
         this.columns.forEach(function (col) {
-          if (_this3.columnProp(col, 'field')) {
-            filterMatchModes[col.props.field] = _this3.columnProp(col, 'filterMatchMode');
+          if (_this4.columnProp(col, 'field')) {
+            filterMatchModes[col.props.field] = _this4.columnProp(col, 'filterMatchMode');
           }
         });
       }
@@ -1777,7 +1828,7 @@ var script = {
       this.$refs.resizeHelper.style.display = 'block';
     },
     onColumnResizeEnd: function onColumnResizeEnd() {
-      var delta = this.$refs.resizeHelper.offsetLeft - this.lastResizeHelperX;
+      var delta = this.isRTL ? this.lastResizeHelperX - this.$refs.resizeHelper.offsetLeft : this.$refs.resizeHelper.offsetLeft - this.lastResizeHelperX;
       var columnWidth = this.resizeColumnElement.offsetWidth;
       var newColumnWidth = columnWidth + delta;
       var minWidth = this.resizeColumnElement.style.minWidth || 15;
@@ -1828,19 +1879,19 @@ var script = {
       this.styleElement.innerHTML = innerHTML;
     },
     bindColumnResizeEvents: function bindColumnResizeEvents() {
-      var _this4 = this;
+      var _this5 = this;
       if (!this.documentColumnResizeListener) {
         this.documentColumnResizeListener = document.addEventListener('mousemove', function (event) {
-          if (_this4.columnResizing) {
-            _this4.onColumnResize(event);
+          if (_this5.columnResizing) {
+            _this5.onColumnResize(event);
           }
         });
       }
       if (!this.documentColumnResizeEndListener) {
         this.documentColumnResizeEndListener = document.addEventListener('mouseup', function () {
-          if (_this4.columnResizing) {
-            _this4.columnResizing = false;
-            _this4.onColumnResizeEnd();
+          if (_this5.columnResizing) {
+            _this5.columnResizing = false;
+            _this5.onColumnResizeEnd();
           }
         });
       }
@@ -2054,18 +2105,36 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     pt: _ctx.ptm('pcPaginator')
   }, createSlots({
     _: 2
-  }, [_ctx.$slots.paginatorstart ? {
+  }, [_ctx.$slots.paginatorcontainer ? {
+    name: "container",
+    fn: withCtx(function (slotProps) {
+      return [renderSlot(_ctx.$slots, "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
+      })];
+    }),
+    key: "0"
+  } : undefined, _ctx.$slots.paginatorstart ? {
     name: "start",
     fn: withCtx(function () {
       return [renderSlot(_ctx.$slots, "paginatorstart")];
     }),
-    key: "0"
+    key: "1"
   } : undefined, _ctx.$slots.paginatorend ? {
     name: "end",
     fn: withCtx(function () {
       return [renderSlot(_ctx.$slots, "paginatorend")];
     }),
-    key: "1"
+    key: "2"
   } : undefined, _ctx.$slots.paginatorfirstpagelinkicon ? {
     name: "firstpagelinkicon",
     fn: withCtx(function (slotProps) {
@@ -2073,7 +2142,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "class": normalizeClass(slotProps["class"])
       })];
     }),
-    key: "2"
+    key: "3"
   } : undefined, _ctx.$slots.paginatorprevpagelinkicon ? {
     name: "prevpagelinkicon",
     fn: withCtx(function (slotProps) {
@@ -2081,7 +2150,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "class": normalizeClass(slotProps["class"])
       })];
     }),
-    key: "3"
+    key: "4"
   } : undefined, _ctx.$slots.paginatornextpagelinkicon ? {
     name: "nextpagelinkicon",
     fn: withCtx(function (slotProps) {
@@ -2089,7 +2158,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "class": normalizeClass(slotProps["class"])
       })];
     }),
-    key: "4"
+    key: "5"
   } : undefined, _ctx.$slots.paginatorlastpagelinkicon ? {
     name: "lastpagelinkicon",
     fn: withCtx(function (slotProps) {
@@ -2097,7 +2166,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "class": normalizeClass(slotProps["class"])
       })];
     }),
-    key: "5"
+    key: "6"
   } : undefined, _ctx.$slots.paginatorjumptopagedropdownicon ? {
     name: "jumptopagedropdownicon",
     fn: withCtx(function (slotProps) {
@@ -2105,7 +2174,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "class": normalizeClass(slotProps["class"])
       })];
     }),
-    key: "6"
+    key: "7"
   } : undefined, _ctx.$slots.paginatorrowsperpagedropdownicon ? {
     name: "rowsperpagedropdownicon",
     fn: withCtx(function (slotProps) {
@@ -2113,7 +2182,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "class": normalizeClass(slotProps["class"])
       })];
     }),
-    key: "7"
+    key: "8"
   } : undefined]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "class", "alwaysShow", "unstyled", "pt"])) : createCommentVNode("", true), createElementVNode("div", mergeProps({
     "class": _ctx.cx('tableContainer'),
     style: [_ctx.sx('tableContainer'), {
@@ -2240,18 +2309,36 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     pt: _ctx.ptm('pcPaginator')
   }, createSlots({
     _: 2
-  }, [_ctx.$slots.paginatorstart ? {
+  }, [_ctx.$slots.paginatorcontainer ? {
+    name: "container",
+    fn: withCtx(function (slotProps) {
+      return [renderSlot(_ctx.$slots, "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
+      })];
+    }),
+    key: "0"
+  } : undefined, _ctx.$slots.paginatorstart ? {
     name: "start",
     fn: withCtx(function () {
       return [renderSlot(_ctx.$slots, "paginatorstart")];
     }),
-    key: "0"
+    key: "1"
   } : undefined, _ctx.$slots.paginatorend ? {
     name: "end",
     fn: withCtx(function () {
       return [renderSlot(_ctx.$slots, "paginatorend")];
     }),
-    key: "1"
+    key: "2"
   } : undefined, _ctx.$slots.paginatorfirstpagelinkicon ? {
     name: "firstpagelinkicon",
     fn: withCtx(function (slotProps) {
@@ -2259,7 +2346,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "class": normalizeClass(slotProps["class"])
       })];
     }),
-    key: "2"
+    key: "3"
   } : undefined, _ctx.$slots.paginatorprevpagelinkicon ? {
     name: "prevpagelinkicon",
     fn: withCtx(function (slotProps) {
@@ -2267,7 +2354,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "class": normalizeClass(slotProps["class"])
       })];
     }),
-    key: "3"
+    key: "4"
   } : undefined, _ctx.$slots.paginatornextpagelinkicon ? {
     name: "nextpagelinkicon",
     fn: withCtx(function (slotProps) {
@@ -2275,7 +2362,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "class": normalizeClass(slotProps["class"])
       })];
     }),
-    key: "4"
+    key: "5"
   } : undefined, _ctx.$slots.paginatorlastpagelinkicon ? {
     name: "lastpagelinkicon",
     fn: withCtx(function (slotProps) {
@@ -2283,7 +2370,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "class": normalizeClass(slotProps["class"])
       })];
     }),
-    key: "5"
+    key: "6"
   } : undefined, _ctx.$slots.paginatorjumptopagedropdownicon ? {
     name: "jumptopagedropdownicon",
     fn: withCtx(function (slotProps) {
@@ -2291,7 +2378,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "class": normalizeClass(slotProps["class"])
       })];
     }),
-    key: "6"
+    key: "7"
   } : undefined, _ctx.$slots.paginatorrowsperpagedropdownicon ? {
     name: "rowsperpagedropdownicon",
     fn: withCtx(function (slotProps) {
@@ -2299,7 +2386,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "class": normalizeClass(slotProps["class"])
       })];
     }),
-    key: "7"
+    key: "8"
   } : undefined]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "class", "alwaysShow", "unstyled", "pt"])) : createCommentVNode("", true), _ctx.$slots.footer ? (openBlock(), createElementBlock("div", mergeProps({
     key: 4,
     "class": _ctx.cx('footer')