primevue 3.16.2 → 3.17.0

package/datatable/FooterCell.vue

@@ -1,13 +1,12 @@
 <template>
-    <td :style="containerStyle" :class="containerClass" role="cell"
-        :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')">
-        <component :is="column.children.footer" :column="column" v-if="column.children && column.children.footer"/>
-        {{columnProp('footer')}}
+    <td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')">
+        <component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
+        {{ columnProp('footer') }}
     </td>
 </template>
 
 <script>
-import {DomHandler,ObjectUtils} from 'primevue/utils';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'FooterCell',
@@ -20,7 +19,7 @@ export default {
     data() {
         return {
             styleObject: {}
-        }
+        };
     },
     mounted() {
         if (this.columnProp('frozen')) {
@@ -39,20 +38,24 @@ 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.left);
                     }
+
                     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);
                     }
+
                     this.styleObject.left = left + 'px';
                 }
             }
@@ -60,16 +63,20 @@ export default {
     },
     computed: {
         containerClass() {
-            return [this.columnProp('footerClass'), this.columnProp('class'), {
-                'p-frozen-column': this.columnProp('frozen')
-            }];
+            return [
+                this.columnProp('footerClass'),
+                this.columnProp('class'),
+                {
+                    'p-frozen-column': this.columnProp('frozen')
+                }
+            ];
         },
         containerStyle() {
             let bodyStyle = this.columnProp('footerStyle');
             let columnStyle = this.columnProp('style');
 
-            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject]: [columnStyle, bodyStyle];
+            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];
         }
     }
-}
+};
 </script>

package/datatable/HeaderCell.vue

@@ -1,37 +1,86 @@
 <template>
-    <th :style="containerStyle" :class="containerClass" :tabindex="columnProp('sortable') ? '0' : null" role="cell"
-        @click="onClick" @keydown="onKeyDown" @mousedown="onMouseDown"
-        @dragstart="onDragStart" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop"
-        :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" :aria-sort="ariaSort">
-        <span class="p-column-resizer" @mousedown="onResizeStart" v-if="resizableColumns && !columnProp('frozen')"></span>
+    <th
+        :style="containerStyle"
+        :class="containerClass"
+        :tabindex="columnProp('sortable') ? '0' : null"
+        role="cell"
+        @click="onClick"
+        @keydown="onKeyDown"
+        @mousedown="onMouseDown"
+        @dragstart="onDragStart"
+        @dragover="onDragOver"
+        @dragleave="onDragLeave"
+        @drop="onDrop"
+        :colspan="columnProp('colspan')"
+        :rowspan="columnProp('rowspan')"
+        :aria-sort="ariaSort"
+    >
+        <span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart"></span>
         <div class="p-column-header-content">
-            <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>
+            <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">{{getBadgeValue()}}</span>
-            <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange" :disabled="empty" v-if="columnProp('selectionMode') ==='multiple' && filterDisplay !== 'row'" />
-            <DTColumnFilter v-if="filterDisplay === 'menu' && column.children && column.children.filter" :field="columnProp('filterField')||columnProp('field')" :type="columnProp('dataType')" display="menu"
-            :showMenu="columnProp('showFilterMenu')" :filterElement="column.children && column.children.filter"
-            :filterHeaderTemplate="column.children && column.children.filterheader" :filterFooterTemplate="column.children && column.children.filterfooter"
-            :filterClearTemplate="column.children && column.children.filterclear" :filterApplyTemplate="column.children && column.children.filterapply"
-            :filters="filters" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')" :filterMenuStyle="columnProp('filterMenuStyle')" :filterMenuClass="columnProp('filterMenuClass')"
-            :showOperator="columnProp('showFilterOperator')" :showClearButton="columnProp('showClearButton')" :showApplyButton="columnProp('showApplyButton')"
-            :showMatchModes="columnProp('showFilterMatchModes')" :showAddButton="columnProp('showAddButton')" :matchModeOptions="columnProp('filterMatchModeOptions')" :maxConstraints="columnProp('maxConstraints')"
-            @operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)" @constraint-add="$emit('constraint-add', $event)" @constraint-remove="$emit('constraint-remove', $event)" @apply-click="$emit('apply-click',$event)"/>
+            <span v-if="isMultiSorted()" class="p-sortable-column-badge">{{ getBadgeValue() }}</span>
+            <DTHeaderCheckbox v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'" :checked="allRowsSelected" @change="onHeaderCheckboxChange" :disabled="empty" />
+            <DTColumnFilter
+                v-if="filterDisplay === 'menu' && column.children && column.children.filter"
+                :field="columnProp('filterField') || columnProp('field')"
+                :type="columnProp('dataType')"
+                display="menu"
+                :showMenu="columnProp('showFilterMenu')"
+                :filterElement="column.children && column.children.filter"
+                :filterHeaderTemplate="column.children && column.children.filterheader"
+                :filterFooterTemplate="column.children && column.children.filterfooter"
+                :filterClearTemplate="column.children && column.children.filterclear"
+                :filterApplyTemplate="column.children && column.children.filterapply"
+                :filters="filters"
+                :filtersStore="filtersStore"
+                @filter-change="$emit('filter-change', $event)"
+                @filter-apply="$emit('filter-apply')"
+                :filterMenuStyle="columnProp('filterMenuStyle')"
+                :filterMenuClass="columnProp('filterMenuClass')"
+                :showOperator="columnProp('showFilterOperator')"
+                :showClearButton="columnProp('showClearButton')"
+                :showApplyButton="columnProp('showApplyButton')"
+                :showMatchModes="columnProp('showFilterMatchModes')"
+                :showAddButton="columnProp('showAddButton')"
+                :matchModeOptions="columnProp('filterMatchModeOptions')"
+                :maxConstraints="columnProp('maxConstraints')"
+                @operator-change="$emit('operator-change', $event)"
+                @matchmode-change="$emit('matchmode-change', $event)"
+                @constraint-add="$emit('constraint-add', $event)"
+                @constraint-remove="$emit('constraint-remove', $event)"
+                @apply-click="$emit('apply-click', $event)"
+            />
         </div>
     </th>
 </template>
 
 <script>
-import {DomHandler,ObjectUtils} from 'primevue/utils';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
 import HeaderCheckbox from './HeaderCheckbox.vue';
 import ColumnFilter from './ColumnFilter.vue';
 
 export default {
     name: 'HeaderCell',
-    emits: ['column-click', 'column-mousedown', 'column-dragstart', 'column-dragover', 'column-dragleave', 'column-drop',
-            'column-resizestart', 'checkbox-change', 'filter-change', 'filter-apply',
-            'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
+    emits: [
+        'column-click',
+        'column-mousedown',
+        'column-dragstart',
+        'column-dragover',
+        'column-dragleave',
+        'column-drop',
+        'column-resizestart',
+        'checkbox-change',
+        'filter-change',
+        'filter-apply',
+        'operator-change',
+        'matchmode-change',
+        'constraint-add',
+        'constraint-remove',
+        'filter-clear',
+        'apply-click'
+    ],
     props: {
         column: {
             type: Object,
@@ -42,7 +91,7 @@ export default {
             default: false
         },
         groupRowsBy: {
-            type: [Array,String],
+            type: [Array, String],
             default: null
         },
         sortMode: {
@@ -97,7 +146,7 @@ export default {
     data() {
         return {
             styleObject: {}
-        }
+        };
     },
     mounted() {
         if (this.columnProp('frozen')) {
@@ -114,15 +163,15 @@ export default {
             return ObjectUtils.getVNodeProp(this.column, prop);
         },
         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 });
             }
         },
         onMouseDown(event) {
-            this.$emit('column-mousedown', {originalEvent: event, column: this.column});
+            this.$emit('column-mousedown', { originalEvent: event, column: this.column });
         },
         onDragStart(event) {
             this.$emit('column-dragstart', event);
@@ -140,42 +189,48 @@ export default {
             this.$emit('column-resizestart', event);
         },
         getMultiSortMetaIndex() {
-            return this.multiSortMeta.findIndex(meta => (meta.field === this.columnProp('field') || meta.field === this.columnProp('sortField')));
+            return this.multiSortMeta.findIndex((meta) => meta.field === this.columnProp('field') || meta.field === this.columnProp('sortField'));
         },
         getBadgeValue() {
             let index = this.getMultiSortMetaIndex();
 
-            return (this.groupRowsBy && this.groupRowsBy === this.groupRowSortField) && index > -1 ? index : index + 1;
+            return this.groupRowsBy && this.groupRowsBy === this.groupRowSortField && index > -1 ? index : index + 1;
         },
         isMultiSorted() {
-            return this.sortMode === 'multiple' && this.columnProp('sortable') && this.getMultiSortMetaIndex() > -1
+            return this.sortMode === 'multiple' && 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();
         },
         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;
                 }
@@ -187,20 +242,24 @@ export default {
     },
     computed: {
         containerClass() {
-            return [this.filterColumn ? this.columnProp('filterHeaderClass') : this.columnProp('headerClass'), this.columnProp('class'), {
+            return [
+                this.filterColumn ? this.columnProp('filterHeaderClass') : this.columnProp('headerClass'),
+                this.columnProp('class'),
+                {
                     'p-sortable-column': this.columnProp('sortable'),
                     'p-resizable-column': this.resizableColumns,
                     'p-highlight': this.isColumnSorted(),
                     'p-filter-column': this.filterColumn,
                     'p-frozen-column': this.columnProp('frozen'),
                     'p-reorderable-column': this.reorderableColumns
-            }];
+                }
+            ];
         },
         containerStyle() {
-            let headerStyle = this.filterColumn ? this.columnProp('filterHeaderStyle'): this.columnProp('headerStyle');
+            let headerStyle = this.filterColumn ? this.columnProp('filterHeaderStyle') : 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;
@@ -208,10 +267,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;
@@ -219,7 +278,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
@@ -229,21 +289,18 @@ 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;
             }
         }
     },
     components: {
-        'DTHeaderCheckbox': HeaderCheckbox,
-        'DTColumnFilter': ColumnFilter
+        DTHeaderCheckbox: HeaderCheckbox,
+        DTColumnFilter: ColumnFilter
     }
-}
+};
 </script>

package/datatable/HeaderCheckbox.vue

@@ -1,8 +1,15 @@
 <template>
-    <div :class="['p-checkbox p-component', {'p-checkbox-focused': focused, 'p-disabled': $attrs.disabled}]" @click="onClick" @keydown.space.prevent="onClick">
-        <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]"
-            role="checkbox" :aria-checked="checked" :tabindex="$attrs.disabled ? null : '0'" @focus="onFocus($event)" @blur="onBlur($event)">
-            <span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>
+    <div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused, 'p-disabled': $attrs.disabled }]" @click="onClick" @keydown.space.prevent="onClick">
+        <div
+            ref="box"
+            :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]"
+            role="checkbox"
+            :aria-checked="checked"
+            :tabindex="$attrs.disabled ? null : '0'"
+            @focus="onFocus($event)"
+            @blur="onBlur($event)"
+        >
+            <span :class="['p-checkbox-icon', { 'pi pi-check': checked }]"></span>
         </div>
     </div>
 </template>
@@ -37,5 +44,5 @@ export default {
             this.focused = false;
         }
     }
-}
+};
 </script>

package/datatable/RowCheckbox.vue

@@ -1,8 +1,16 @@
 <template>
-    <div :class="['p-checkbox p-component', {'p-checkbox-focused': focused}]" @click.stop.prevent="onClick">
-        <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]"
-            role="checkbox" :aria-checked="checked" :tabindex="$attrs.disabled ? null : '0'" @keydown.space.prevent="onClick" @focus="onFocus($event)" @blur="onBlur($event)">
-            <span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>
+    <div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused }]" @click.stop.prevent="onClick">
+        <div
+            ref="box"
+            :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]"
+            role="checkbox"
+            :aria-checked="checked"
+            :tabindex="$attrs.disabled ? null : '0'"
+            @keydown.space.prevent="onClick"
+            @focus="onFocus($event)"
+            @blur="onBlur($event)"
+        >
+            <span :class="['p-checkbox-icon', { 'pi pi-check': checked }]"></span>
         </div>
     </div>
 </template>
@@ -13,7 +21,7 @@ export default {
     inheritAttrs: false,
     emits: ['change'],
     props: {
-		value: null,
+        value: null,
         checked: null
     },
     data() {
@@ -38,5 +46,5 @@ export default {
             this.focused = false;
         }
     }
-}
+};
 </script>

package/datatable/RowRadioButton.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="['p-radiobutton p-component', {'p-radiobutton-focused': focused}]" @click="onClick" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick">
-        <div ref="box" :class="['p-radiobutton-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="radio" :aria-checked="checked">
+    <div :class="['p-radiobutton p-component', { 'p-radiobutton-focused': focused }]" @click="onClick" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick">
+        <div ref="box" :class="['p-radiobutton-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]" role="radio" :aria-checked="checked">
             <div class="p-radiobutton-icon"></div>
         </div>
     </div>
@@ -12,7 +12,7 @@ export default {
     inheritAttrs: false,
     emits: ['change'],
     props: {
-		value: null,
+        value: null,
         checked: null
     },
     data() {
@@ -38,5 +38,5 @@ export default {
             this.focused = false;
         }
     }
-}
+};
 </script>