primevue 4.2.2 → 4.2.3

package/treetable/FooterCell.vue

@@ -6,8 +6,8 @@
 </template>
 
 <script>
+import { getNextElementSibling, getOuterWidth, getPreviousElementSibling } from '@primeuix/utils/dom';
 import BaseComponent from '@primevue/core/basecomponent';
-import { getNextElementSibling, getPreviousElementSibling, getOuterWidth } from '@primeuix/utils/dom';
 import { getVNodeProp } from '@primevue/core/utils';
 import { mergeProps } from 'vue';
 
@@ -66,7 +66,6 @@ export default {
         },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
-                let isRTL = this.$parentInstance.isRTL;
                 let align = this.columnProp('alignFrozen');
 
                 if (align === 'right') {
@@ -77,11 +76,7 @@ export default {
                         pos = getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
 
-                    if (isRTL) {
-                        this.styleObject.left = pos + 'px';
-                    } else {
-                        this.styleObject.right = pos + 'px';
-                    }
+                    this.styleObject.insetInlineEnd = pos + 'px';
                 } else {
                     let pos = 0;
                     let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
@@ -90,11 +85,7 @@ export default {
                         pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
 
-                    if (isRTL) {
-                        this.styleObject.right = pos + 'px';
-                    } else {
-                        this.styleObject.left = pos + 'px';
-                    }
+                    this.styleObject.insetInlineStart = pos + 'px';
                 }
             }
         }

package/treetable/HeaderCell.vue

@@ -26,8 +26,8 @@
 </template>
 
 <script>
+import { getAttribute, getIndex, getNextElementSibling, getOuterWidth, getPreviousElementSibling } from '@primeuix/utils/dom';
 import BaseComponent from '@primevue/core/basecomponent';
-import { getNextElementSibling, getPreviousElementSibling, getOuterWidth, getAttribute, getIndex } from '@primeuix/utils/dom';
 import { getVNodeProp } from '@primevue/core/utils';
 import SortAltIcon from '@primevue/icons/sortalt';
 import SortAmountDownIcon from '@primevue/icons/sortamountdown';
@@ -115,7 +115,6 @@ export default {
         },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
-                let isRTL = this.$parentInstance.isRTL;
                 let align = this.columnProp('alignFrozen');
 
                 if (align === 'right') {
@@ -126,11 +125,7 @@ export default {
                         pos = getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
 
-                    if (isRTL) {
-                        this.styleObject.left = pos + 'px';
-                    } else {
-                        this.styleObject.right = pos + 'px';
-                    }
+                    this.styleObject.insetInlineEnd = pos + 'px';
                 } else {
                     let pos = 0;
                     let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
@@ -139,11 +134,7 @@ export default {
                         pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
 
-                    if (isRTL) {
-                        this.styleObject.right = pos + 'px';
-                    } else {
-                        this.styleObject.left = pos + 'px';
-                    }
+                    this.styleObject.insetInlineStart = pos + 'px';
                 }
 
                 let filterRow = this.$el.parentElement.nextElementSibling;

package/treetable/TreeTable.vue

@@ -203,7 +203,7 @@
 </template>
 
 <script>
-import { addStyle, clearSelection, find, getAttribute, getIndex, getOffset, getOuterWidth, setAttribute } from '@primeuix/utils/dom';
+import { addStyle, clearSelection, find, getAttribute, getIndex, getOffset, getOuterWidth, isRTL, setAttribute } from '@primeuix/utils/dom';
 import { localeComparator, resolveFieldData, sort } from '@primeuix/utils/object';
 import { FilterService } from '@primevue/core/api';
 import { getVNodeProp, HelperSet } from '@primevue/core/utils';
@@ -251,15 +251,13 @@ export default {
             d_sortOrder: this.sortOrder,
             d_multiSortMeta: this.multiSortMeta ? [...this.multiSortMeta] : [],
             hasASelectedNode: false,
-            d_columns: new HelperSet({ type: 'Column' }),
-            isRTL: false
+            d_columns: new HelperSet({ type: 'Column' })
         };
     },
     documentColumnResizeListener: null,
     documentColumnResizeEndListener: null,
     lastResizeHelperX: null,
     resizeColumnElement: null,
-    mutationObserver: null,
     watch: {
         expandedKeys(newValue) {
             this.d_expandedKeys = newValue;
@@ -280,32 +278,11 @@ 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);
         },
@@ -701,7 +678,7 @@ export default {
             this.$refs.resizeHelper.style.display = 'block';
         },
         onColumnResizeEnd() {
-            let delta = this.isRTL ? this.lastResizeHelperX - this.$refs.resizeHelper.offsetLeft : this.$refs.resizeHelper.offsetLeft - this.lastResizeHelperX;
+            let delta = isRTL(this.$el) ? 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.mjs

@@ -1,4 +1,4 @@
-import { getNextElementSibling, getOuterWidth, getPreviousElementSibling, getIndex, getAttribute, isClickable, findSingle, focus, find, clearSelection, getOffset, addStyle, setAttribute } from '@primeuix/utils/dom';
+import { getNextElementSibling, getOuterWidth, getPreviousElementSibling, getIndex, getAttribute, isClickable, findSingle, focus, find, clearSelection, getOffset, addStyle, isRTL, setAttribute } from '@primeuix/utils/dom';
 import { resolveFieldData, equals, localeComparator, sort } from '@primeuix/utils/object';
 import { FilterService } from '@primevue/core/api';
 import { getVNodeProp, HelperSet } from '@primevue/core/utils';
@@ -261,7 +261,6 @@ var script$4 = {
     },
     updateStickyPosition: function updateStickyPosition() {
       if (this.columnProp('frozen')) {
-        var isRTL = this.$parentInstance.isRTL;
         var align = this.columnProp('alignFrozen');
         if (align === 'right') {
           var pos = 0;
@@ -269,22 +268,14 @@ var script$4 = {
           if (next) {
             pos = getOuterWidth(next) + parseFloat(next.style.right || 0);
           }
-          if (isRTL) {
-            this.styleObject.left = pos + 'px';
-          } else {
-            this.styleObject.right = pos + 'px';
-          }
+          this.styleObject.insetInlineEnd = pos + 'px';
         } else {
           var _pos = 0;
           var prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
           if (prev) {
             _pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
           }
-          if (isRTL) {
-            this.styleObject.right = _pos + 'px';
-          } else {
-            this.styleObject.left = _pos + 'px';
-          }
+          this.styleObject.insetInlineStart = _pos + 'px';
         }
       }
     }
@@ -408,7 +399,6 @@ var script$3 = {
     },
     updateStickyPosition: function updateStickyPosition() {
       if (this.columnProp('frozen')) {
-        var isRTL = this.$parentInstance.isRTL;
         var align = this.columnProp('alignFrozen');
         if (align === 'right') {
           var pos = 0;
@@ -416,22 +406,14 @@ var script$3 = {
           if (next) {
             pos = getOuterWidth(next) + parseFloat(next.style.right || 0);
           }
-          if (isRTL) {
-            this.styleObject.left = pos + 'px';
-          } else {
-            this.styleObject.right = pos + 'px';
-          }
+          this.styleObject.insetInlineEnd = pos + 'px';
         } else {
           var _pos = 0;
           var prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
           if (prev) {
             _pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
           }
-          if (isRTL) {
-            this.styleObject.right = _pos + 'px';
-          } else {
-            this.styleObject.left = _pos + 'px';
-          }
+          this.styleObject.insetInlineStart = _pos + 'px';
         }
         var filterRow = this.$el.parentElement.nextElementSibling;
         if (filterRow) {
@@ -709,7 +691,6 @@ var script$2 = {
     },
     updateStickyPosition: function updateStickyPosition() {
       if (this.columnProp('frozen')) {
-        var isRTL = this.$parentInstance.isRTL;
         var align = this.columnProp('alignFrozen');
         if (align === 'right') {
           var pos = 0;
@@ -717,22 +698,14 @@ var script$2 = {
           if (next) {
             pos = getOuterWidth(next) + parseFloat(next.style.right || 0);
           }
-          if (isRTL) {
-            this.styleObject.left = pos + 'px';
-          } else {
-            this.styleObject.right = pos + 'px';
-          }
+          this.styleObject.insetInlineEnd = pos + 'px';
         } else {
           var _pos = 0;
           var prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
           if (prev) {
             _pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
           }
-          if (isRTL) {
-            this.styleObject.right = _pos + 'px';
-          } else {
-            this.styleObject.left = _pos + 'px';
-          }
+          this.styleObject.insetInlineStart = _pos + 'px';
         }
       }
     },
@@ -1396,15 +1369,13 @@ 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;
@@ -1425,33 +1396,11 @@ 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);
     },
@@ -1634,13 +1583,13 @@ var script = {
       return this.sortNodesSingle(nodes);
     },
     sortNodesSingle: function sortNodesSingle(nodes) {
-      var _this2 = this;
+      var _this = this;
       var _nodes = _toConsumableArray(nodes);
       var comparer = localeComparator();
       _nodes.sort(function (node1, node2) {
-        var value1 = resolveFieldData(node1.data, _this2.d_sortField);
-        var value2 = resolveFieldData(node2.data, _this2.d_sortField);
-        return sort(value1, value2, _this2.d_sortOrder, comparer);
+        var value1 = resolveFieldData(node1.data, _this.d_sortField);
+        var value2 = resolveFieldData(node2.data, _this.d_sortField);
+        return sort(value1, value2, _this.d_sortOrder, comparer);
       });
       return _nodes;
     },
@@ -1648,10 +1597,10 @@ var script = {
       return this.sortNodesMultiple(nodes);
     },
     sortNodesMultiple: function sortNodesMultiple(nodes) {
-      var _this3 = this;
+      var _this2 = this;
       var _nodes = _toConsumableArray(nodes);
       _nodes.sort(function (node1, node2) {
-        return _this3.multisortField(node1, node2, 0);
+        return _this2.multisortField(node1, node2, 0);
       });
       return _nodes;
     },
@@ -1788,13 +1737,13 @@ var script = {
       return node.leaf === false ? false : !(node.children && node.children.length);
     },
     createLazyLoadEvent: function createLazyLoadEvent(event) {
-      var _this4 = this;
+      var _this3 = this;
       var filterMatchModes;
       if (this.hasFilters()) {
         filterMatchModes = {};
         this.columns.forEach(function (col) {
-          if (_this4.columnProp(col, 'field')) {
-            filterMatchModes[col.props.field] = _this4.columnProp(col, 'filterMatchMode');
+          if (_this3.columnProp(col, 'field')) {
+            filterMatchModes[col.props.field] = _this3.columnProp(col, 'filterMatchMode');
           }
         });
       }
@@ -1828,7 +1777,7 @@ var script = {
       this.$refs.resizeHelper.style.display = 'block';
     },
     onColumnResizeEnd: function onColumnResizeEnd() {
-      var delta = this.isRTL ? this.lastResizeHelperX - this.$refs.resizeHelper.offsetLeft : this.$refs.resizeHelper.offsetLeft - this.lastResizeHelperX;
+      var delta = isRTL(this.$el) ? 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;
@@ -1879,19 +1828,19 @@ var script = {
       this.styleElement.innerHTML = innerHTML;
     },
     bindColumnResizeEvents: function bindColumnResizeEvents() {
-      var _this5 = this;
+      var _this4 = this;
       if (!this.documentColumnResizeListener) {
         this.documentColumnResizeListener = document.addEventListener('mousemove', function (event) {
-          if (_this5.columnResizing) {
-            _this5.onColumnResize(event);
+          if (_this4.columnResizing) {
+            _this4.onColumnResize(event);
           }
         });
       }
       if (!this.documentColumnResizeEndListener) {
         this.documentColumnResizeEndListener = document.addEventListener('mouseup', function () {
-          if (_this5.columnResizing) {
-            _this5.columnResizing = false;
-            _this5.onColumnResizeEnd();
+          if (_this4.columnResizing) {
+            _this4.columnResizing = false;
+            _this4.onColumnResizeEnd();
           }
         });
       }