primevue 3.16.2 → 3.17.0

package/treetable/HeaderCell.vue

@@ -1,20 +1,19 @@
 <template>
-    <th :style="[containerStyle]" :class="containerClass" @click="onClick" @keydown="onKeyDown"
-        :tabindex="columnProp('sortable') ? '0' : null"  :aria-sort="ariaSort">
-        <span class="p-column-resizer" @mousedown="onResizeStart" v-if="resizableColumns && !columnProp('frozen')"></span>
-        <component :is="column.children.header" :column="column" v-if="column.children && column.children.header" />
-        <span class="p-column-title" v-if="columnProp('header')">{{columnProp('header')}}</span>
+    <th :style="[containerStyle]" :class="containerClass" @click="onClick" @keydown="onKeyDown" :tabindex="columnProp('sortable') ? '0' : null" :aria-sort="ariaSort">
+        <span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart"></span>
+        <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
+        <span v-if="columnProp('header')" class="p-column-title">{{ columnProp('header') }}</span>
         <span v-if="columnProp('sortable')" :class="sortableColumnIcon"></span>
-        <span v-if="isMultiSorted()" class="p-sortable-column-badge">{{getMultiSortMetaIndex() + 1}}</span>
+        <span v-if="isMultiSorted()" class="p-sortable-column-badge">{{ getMultiSortMetaIndex() + 1 }}</span>
     </th>
 </template>
 
 <script>
-import {DomHandler,ObjectUtils} from 'primevue/utils';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'HeaderCell',
-    emits: ['column-click','column-resizestart'],
+    emits: ['column-click', 'column-resizestart'],
     props: {
         column: {
             type: Object,
@@ -44,7 +43,7 @@ export default {
     data() {
         return {
             styleObject: {}
-        }
+        };
     },
     mounted() {
         if (this.columnProp('frozen')) {
@@ -63,37 +62,43 @@ export default {
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');
+
                 if (align === 'right') {
                     let right = 0;
                     let next = this.$el.nextElementSibling;
+
                     if (next) {
                         right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
+
                     this.styleObject.right = right + 'px';
-                }
-                else {
+                } else {
                     let left = 0;
                     let prev = this.$el.previousElementSibling;
+
                     if (prev) {
                         left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
+
                     this.styleObject.left = left + 'px';
                 }
 
                 let filterRow = this.$el.parentElement.nextElementSibling;
+
                 if (filterRow) {
                     let index = DomHandler.index(this.$el);
+
                     filterRow.children[index].style.left = this.styleObject.left;
                     filterRow.children[index].style.right = this.styleObject.right;
                 }
             }
         },
         onClick(event) {
-            this.$emit('column-click', {originalEvent: event, column: this.column});
+            this.$emit('column-click', { originalEvent: event, column: this.column });
         },
         onKeyDown(event) {
             if (event.which === 13 && event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
-                this.$emit('column-click', {originalEvent: event, column: this.column});
+                this.$emit('column-click', { originalEvent: event, column: this.column });
             }
         },
         onResizeStart(event) {
@@ -104,6 +109,7 @@ export default {
 
             for (let i = 0; i < this.multiSortMeta.length; i++) {
                 let meta = this.multiSortMeta[i];
+
                 if (meta.field === this.columnProp('field') || meta.field === this.columnProp('sortField')) {
                     index = i;
                     break;
@@ -113,26 +119,30 @@ export default {
             return index;
         },
         isMultiSorted() {
-            return this.columnProp('sortable') && this.getMultiSortMetaIndex() > -1
+            return this.columnProp('sortable') && this.getMultiSortMetaIndex() > -1;
         },
         isColumnSorted() {
-            return this.sortMode === 'single' ? (this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField'))) : this.isMultiSorted();
+            return this.sortMode === 'single' ? this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField')) : this.isMultiSorted();
         }
     },
     computed: {
         containerClass() {
-            return [this.columnProp('headerClass'), this.columnProp('class'), {
-                'p-sortable-column': this.columnProp('sortable'),
-                'p-resizable-column': this.resizableColumns,
-                'p-highlight': this.isColumnSorted(),
-                'p-frozen-column': this.columnProp('frozen')
-            }];
+            return [
+                this.columnProp('headerClass'),
+                this.columnProp('class'),
+                {
+                    'p-sortable-column': this.columnProp('sortable'),
+                    'p-resizable-column': this.resizableColumns,
+                    'p-highlight': this.isColumnSorted(),
+                    'p-frozen-column': this.columnProp('frozen')
+                }
+            ];
         },
         containerStyle() {
             let headerStyle = this.columnProp('headerStyle');
             let columnStyle = this.columnProp('style');
 
-            return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject]: [columnStyle, headerStyle];
+            return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject] : [columnStyle, headerStyle];
         },
         sortableColumnIcon() {
             let sorted = false;
@@ -140,10 +150,10 @@ export default {
 
             if (this.sortMode === 'single') {
                 sorted = this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField'));
-                sortOrder = sorted ? this.sortOrder: 0;
-            }
-            else if (this.sortMode === 'multiple') {
+                sortOrder = sorted ? this.sortOrder : 0;
+            } else if (this.sortMode === 'multiple') {
                 let metaIndex = this.getMultiSortMetaIndex();
+
                 if (metaIndex > -1) {
                     sorted = true;
                     sortOrder = this.multiSortMeta[metaIndex].order;
@@ -151,7 +161,8 @@ export default {
             }
 
             return [
-                'p-sortable-column-icon pi pi-fw', {
+                'p-sortable-column-icon pi pi-fw',
+                {
                     'pi-sort-alt': !sorted,
                     'pi-sort-amount-up-alt': sorted && sortOrder > 0,
                     'pi-sort-amount-down': sorted && sortOrder < 0
@@ -161,17 +172,14 @@ export default {
         ariaSort() {
             if (this.columnProp('sortable')) {
                 const sortIcon = this.sortableColumnIcon;
-                if (sortIcon[1]['pi-sort-amount-down'])
-                    return 'descending';
-                else if (sortIcon[1]['pi-sort-amount-up-alt'])
-                    return 'ascending';
-                else
-                    return 'none';
-            }
-            else {
+
+                if (sortIcon[1]['pi-sort-amount-down']) return 'descending';
+                else if (sortIcon[1]['pi-sort-amount-up-alt']) return 'ascending';
+                else return 'none';
+            } else {
                 return null;
             }
-        },
+        }
     }
-}
+};
 </script>

package/treetable/TreeTable.d.ts

@@ -404,18 +404,18 @@ export declare type TreeTableEmits = {
     /**
      * Callback to invoke on pagination. Sort and Filter information is also available for lazy loading implementation.
      * @param {TreeTablePageEvent} event - Custom page event.
-    */
-    'page': (event: TreeTablePageEvent) => void;
+     */
+    page: (event: TreeTablePageEvent) => void;
     /**
      * Callback to invoke on sort. Page and Filter information is also available for lazy loading implementation.
      * @param {TreeTableSortEvent} event - Custom sort event.
      */
-    'sort': (event: TreeTableSortEvent) => void;
+    sort: (event: TreeTableSortEvent) => void;
     /**
      * Event to emit after filtering, not triggered in lazy mode.
      * @param {TreeTableFilterEvent} event - Custom filter event.
      */
-    'filter': (event: TreeTableFilterEvent) => void;
+    filter: (event: TreeTableFilterEvent) => void;
     /**
      * Callback to invoke when a node is selected.
      * @param {TreeNode} node - Node instance.
@@ -441,13 +441,13 @@ export declare type TreeTableEmits = {
      * @param {Event} event - Browser event.
      */
     'column-resize-end': (event: Event) => void;
-}
+};
 
-declare class TreeTable extends ClassComponent<TreeTableProps, TreeTableSlots, TreeTableEmits> { }
+declare class TreeTable extends ClassComponent<TreeTableProps, TreeTableSlots, TreeTableEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        TreeTable: GlobalComponentConstructor<TreeTable>
+        TreeTable: GlobalComponentConstructor<TreeTable>;
     }
 }
 
@@ -461,7 +461,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [TreeTable](https://www.primefaces.org/primevue/showcase/#/treetable)
+ * - [TreeTable](https://www.primefaces.org/primevue/treetable)
  *
  */
 export default TreeTable;