primevue 2.5.0 → 2.8.0

package/datatable/BodyCell.vue

@@ -1,20 +1,22 @@
 <template>
-    <td :style="column.bodyStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown">
-        <ColumnSlot :data="rowData" :column="column" :index="index" type="body" v-if="column.$scopedSlots.body && !d_editing" />
-        <ColumnSlot :data="rowData" :column="column" :index="index" type="editor" v-else-if="column.$scopedSlots.editor && d_editing" />
-        <template v-else-if="column.selectionMode">
-            <DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio" v-if="column.selectionMode === 'single'" />
-            <DTCheckbox :value="rowData" :checked="selected" @change="toggleRowWithCheckbox" v-else-if="column.selectionMode ==='multiple'" />
+    <td :style="containerStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown" role="cell" :data-prime="editingRowData">
+        <span v-if="responsiveLayout === 'stack'" class="p-column-title">{{columnProp('header')}}</span>
+        <ColumnSlot :data="rowData" :column="column" :field="field" :index="rowIndex" type="body" :frozenRow="frozenRow" v-if="column.$scopedSlots.body && !d_editing" />
+        <ColumnSlot :data="editingRowData" :column="column" :field="field" :index="rowIndex" type="editor" :frozenRow="frozenRow" v-else-if="column.$scopedSlots.editor && d_editing" />
+        <ColumnSlot :data="editingRowData" :column="column" :field="field" :index="rowIndex" type="body" :frozenRow="frozenRow" v-else-if="!column.$scopedSlots.editor && column.$scopedSlots.body && d_editing" />
+        <template v-else-if="columnProp('selectionMode')">
+            <DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio" v-if="columnProp('selectionMode') === 'single'" />
+            <DTCheckbox :value="rowData" :checked="selected" @change="toggleRowWithCheckbox" v-else-if="columnProp('selectionMode') ==='multiple'" />
         </template>
-        <template v-else-if="column.rowReorder">
-            <i :class="['p-datatable-reorderablerow-handle', column.rowReorderIcon]"></i>
+        <template v-else-if="columnProp('rowReorder')">
+            <i :class="['p-datatable-reorderablerow-handle', (columnProp('rowReorderIcon') || 'pi pi-bars')]"></i>
         </template>
-        <template v-else-if="column.expander">
+        <template v-else-if="columnProp('expander')">
             <button class="p-row-toggler p-link" @click="toggleRow" type="button" v-ripple>
                 <span :class="rowTogglerIcon"></span>
             </button>
         </template>
-        <template v-else-if="editMode === 'row' && column.rowEditor">
+        <template v-else-if="editMode === 'row' && columnProp('rowEditor')">
             <button class="p-row-editor-init p-link" v-if="!d_editing" @click="onRowEditInit" type="button" v-ripple>
                 <span class="p-row-editor-init-icon pi pi-fw pi-pencil"></span>
             </button>
@@ -30,6 +32,7 @@
 </template>
 
 <script>
+import OverlayEventBus from '../overlayeventbus/OverlayEventBus';
 import DomHandler from '../utils/DomHandler';
 import ObjectUtils from '../utils/ObjectUtils';
 import ColumnSlot from './ColumnSlot.vue';
@@ -47,6 +50,14 @@ export default {
             type: Object,
             default: null
         },
+        frozenRow: {
+            type: Boolean,
+            default: false
+        },
+        rowIndex: {
+            type: Number,
+            default: null
+        },
         index: {
             type: Number,
             default: null
@@ -63,36 +74,65 @@ export default {
             type: Boolean,
             default: false
         },
+        editingMeta: {
+            type: Object,
+            default: null
+        },
         editMode: {
             type: String,
             default: null
+        },
+        responsiveLayout: {
+            type: String,
+            default: 'stack'
         }
     },
     documentEditListener: null,
     selfClick: false,
     data() {
         return {
-            d_editing: this.editing
+            d_editing: this.editing,
+            styleObject: {
+                left: '',
+                right: ''
+            }
         }
     },
     watch: {
         editing(newValue) {
             this.d_editing = newValue;
+        },
+        '$data.d_editing': function(newValue) {
+            this.$emit('editing-meta-change', {data: this.rowData, field: (this.field || `field_${this.index}`), index: this.rowIndex, editing: newValue});
         }
     },
     mounted() {
-        this.children = this.$children;
+        if (this.columnProp('frozen')) {
+            this.updateStickyPosition();
+        }
     },
     updated() {
-        let query = this.editMode === 'row' ? '[autofocus]' : 'input';
-        let focusable = DomHandler.findSingle(this.$el, query);
-        if (focusable && document.activeElement != focusable) {
-            focusable.focus();
+        if (this.columnProp('frozen')) {
+            this.updateStickyPosition();
+        }
+
+        if (this.d_editing && (this.editMode === 'cell' || (this.editMode === 'row' && this.columnProp('rowEditor')))) {
+            const focusableEl = DomHandler.getFirstFocusableElement(this.$el);
+            focusableEl && focusableEl.focus();
+        }
+    },
+    beforeDestroy() {
+        if (this.overlayEventListener) {
+            OverlayEventBus.off('overlay-click', this.overlayEventListener);
+            this.overlayEventListener = null;
         }
     },
     methods: {
+        columnProp(prop) {
+            return ObjectUtils.getVNodeProp(this.column, prop);
+        },
         resolveFieldData() {
-            return ObjectUtils.resolveFieldData(this.rowData, this.column.field);
+            return ObjectUtils.resolveFieldData(this.rowData, this.field);
         },
         toggleRow(event) {
             this.$emit('row-toggle', {
@@ -112,7 +152,7 @@ export default {
         bindDocumentEditListener() {
             if (!this.documentEditListener) {
                 this.documentEditListener = (event) => {
-                    if (this.isOutsideClicked(event)) {
+                    if (!this.selfClick) {
                         this.completeEdit(event, 'outside');
                     }
                     this.selfClick = false;
@@ -125,32 +165,42 @@ export default {
             if (this.documentEditListener) {
                 document.removeEventListener('click', this.documentEditListener);
                 this.documentEditListener = null;
-                this.selfClick = true;
+                this.selfClick = false;
             }
         },
         switchCellToViewMode() {
             this.d_editing = false;
             this.unbindDocumentEditListener();
-        },
-        isOutsideClicked() {
-            return !this.selfClick;
+            OverlayEventBus.off('overlay-click', this.overlayEventListener);
+            this.overlayEventListener = null;
         },
         onClick(event) {
             if (this.editMode === 'cell' && this.isEditable()) {
                 this.selfClick = true;
+
                 if (!this.d_editing) {
                     this.d_editing = true;
                     this.bindDocumentEditListener();
-                    this.$emit('cell-edit-init', {originalEvent: event, data: this.rowData, field: this.column.field, index: this.index});
+                    this.$emit('cell-edit-init', {originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex});
+
+                    this.overlayEventListener = (e) => {
+                        if (this.$el && this.$el.contains(e.target)) {
+                            this.selfClick = true;
+                        }
+                    }
+                    OverlayEventBus.on('overlay-click', this.overlayEventListener);
                 }
             }
         },
         completeEdit(event, type) {
-            let completeEvent = {
+            const completeEvent = {
                 originalEvent: event,
                 data: this.rowData,
-                field: this.column.field,
-                index: this.index,
+                newData: this.editingRowData,
+                value: this.rowData[this.field],
+                newValue: this.editingRowData[this.field],
+                field: this.field,
+                index: this.rowIndex,
                 type: type,
                 defaultPrevented: false,
                 preventDefault: function() {
@@ -173,7 +223,7 @@ export default {
 
                     case 27:
                         this.switchCellToViewMode();
-                        this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.column.field, index: this.index});
+                        this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex});
                     break;
 
                     case 9:
@@ -262,22 +312,56 @@ export default {
             return (DomHandler.find(this.$el, '.p-invalid').length === 0);
         },
         onRowEditInit(event) {
-            this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, field: this.column.field, index: this.index});
+            this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
         },
         onRowEditSave(event) {
-            this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, field: this.column.field, index: this.index});
+            this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
         },
         onRowEditCancel(event) {
-            this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, field: this.column.field, index: this.index});
+            this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
+        },
+        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 {
+                    let left = 0;
+                    let prev = this.$el.previousElementSibling;
+                    if (prev) {
+                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+                    }
+                    this.styleObject.left = left + 'px';
+                }
+            }
         }
     },
     computed: {
+        editingRowData() {
+            return this.editingMeta[this.rowIndex] ? this.editingMeta[this.rowIndex].data : this.rowData;
+        },
+        field() {
+            return this.columnProp('field');
+        },
         containerClass() {
-            return [this.column.bodyClass, {
-                'p-selection-column': this.column.selectionMode != null,
+            return [this.columnProp('bodyClass'), this.columnProp('className'), {
+                'p-selection-column': this.columnProp('selectionMode') != null,
                 'p-editable-column': this.isEditable(),
-                'p-cell-editing': this.d_editing
+                'p-cell-editing': this.d_editing,
+                'p-frozen-column': this.columnProp('frozen')
             }];
+        },
+        containerStyle() {
+            let bodyStyle = this.columnProp('bodyStyle');
+            let columnStyle = this.columnProp('styles');
+
+            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject]: [columnStyle, bodyStyle];
         }
     },
     components: {
@@ -289,4 +373,4 @@ export default {
         'ripple': Ripple
     }
 }
-</script>
+</script>