Fixed #1263 - Kebap-case is not supported in some components like DataTable

src/components/datatable/BodyCell.vue

@@ -4,8 +4,8 @@
         <component :is="column.children.body" :data="rowData" :column="column" :index="rowIndex" :frozenRow="frozenRow" v-if="column.children && column.children.body && !d_editing" />
         <component :is="column.children.editor" :data="rowData" :column="column" :index="rowIndex" :frozenRow="frozenRow" v-else-if="column.children && column.children.editor && d_editing" />
         <template v-else-if="columnProp('selectionMode')">
-            <DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio" v-if="column.props.selectionMode === 'single'" />
-            <DTCheckbox :value="rowData" :checked="selected" @change="toggleRowWithCheckbox" v-else-if="column.props.selectionMode ==='multiple'" />
+            <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="columnProp('rowReorder')">
             <i :class="['p-datatable-reorderablerow-handle', (columnProp('rowReorderIcon') || 'pi pi-bars')]"></i>
@@ -115,7 +115,7 @@ export default {
     },
     methods: {
         columnProp(prop) {
-            return this.column.props ? ((this.column.type.props[prop].type === Boolean && this.column.props[prop] === '') ? true : this.column.props[prop]) : null;
+            return ObjectUtils.getVNodeProp(this.column, prop);
         },
         resolveFieldData() {
             return ObjectUtils.resolveFieldData(this.rowData, this.columnProp('field'));

src/components/datatable/FooterCell.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
+import {DomHandler,ObjectUtils} from 'primevue/utils';
 
 export default {
     name: 'FooterCell',
@@ -34,7 +34,8 @@ export default {
     },
     methods: {
         columnProp(prop) {
-            return this.column.props ? ((this.column.type.props[prop].type === Boolean && this.column.props[prop] === '') ? true : this.column.props[prop]) : null;
+            let propName = ObjectUtils.camelToKebap(prop);
+            return this.column.props ? ((this.column.type.props[propName].type === Boolean && this.column.props[propName] === '') ? true : this.column.props[propName]) : null;
         },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {

src/components/datatable/HeaderCell.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
+import {DomHandler,ObjectUtils} from 'primevue/utils';
 import HeaderCheckbox from './HeaderCheckbox.vue';
 import ColumnFilter from './ColumnFilter.vue';
 
@@ -107,7 +107,7 @@ export default {
     },
     methods: {
         columnProp(prop) {
-            return this.column.props ? ((this.column.type.props[prop].type === Boolean && this.column.props[prop] === '') ? true : this.column.props[prop]) : null;
+            return ObjectUtils.getVNodeProp(this.column, prop);
         },
         onClick(event) {
             this.$emit('column-click', {originalEvent: event, column: this.column});

src/components/splitter/Splitter.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
+import {DomHandler,ObjectUtils} from 'primevue/utils';
 
 export default {
     name: 'Splitter',
@@ -150,11 +150,13 @@ export default {
             }
         },
         validateResize(newPrevPanelSize, newNextPanelSize) {
-            if (this.panels[0].props && this.panels[0].props.minSize && this.panels[0].props.minSize > newPrevPanelSize) {
+            let prevPanelMinSize = ObjectUtils.getVNodeProp(this.panels[0], 'minSize');
+            if (this.panels[0].props && prevPanelMinSize && prevPanelMinSize > newPrevPanelSize) {
                 return false;
             }
 
-            if (this.panels[1].props && this.panels[1].props.minSize && this.panels[1].props.minSize > newNextPanelSize) {
+            let newPanelMinSize = ObjectUtils.getVNodeProp(this.panels[1], 'minSize');
+            if (this.panels[1].props && newPanelMinSize && newPanelMinSize > newNextPanelSize) {
                 return false;
             }
 

src/components/treetable/BodyCell.vue

@@ -17,8 +17,7 @@
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
-import {ObjectUtils} from 'primevue/utils';
+import {DomHandler,ObjectUtils} from 'primevue/utils';
 import Ripple from 'primevue/ripple'
 
 export default {
@@ -83,7 +82,7 @@ export default {
             this.$emit('node-toggle', this.node);
         },
         columnProp(prop) {
-            return this.column.props ? ((this.column.type.props[prop].type === Boolean && this.column.props[prop] === '') ? true : this.column.props[prop]) : null;
+            return ObjectUtils.getVNodeProp(this.column, prop);
         },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {

src/components/treetable/FooterCell.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
+import {DomHandler,ObjectUtils} from 'primevue/utils';
 
 export default {
     name: 'FooterCell',
@@ -33,7 +33,7 @@ export default {
     },
     methods: {
         columnProp(prop) {
-            return this.column.props ? ((this.column.type.props[prop].type === Boolean && this.column.props[prop] === '') ? true : this.column.props[prop]) : null;
+            return ObjectUtils.getVNodeProp(this.column, prop);
         },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {

src/components/treetable/HeaderCell.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
+import {DomHandler,ObjectUtils} from 'primevue/utils';
 
 export default {
     name: 'HeaderCell',
@@ -58,7 +58,7 @@ export default {
     },
     methods: {
         columnProp(prop) {
-            return this.column.props ? ((this.column.type.props[prop].type === Boolean && this.column.props[prop] === '') ? true : this.column.props[prop]) : null;
+            return ObjectUtils.getVNodeProp(this.column, prop);
         },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {

src/components/utils/ObjectUtils.js

@@ -191,4 +191,17 @@ export default class ObjectUtils {
 
         return str;
     }
+
+    static getVNodeProp(vnode, prop) {
+        let props = vnode.props;
+        if (props) {
+            let kebapProp = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+            let propName = Object.prototype.hasOwnProperty.call(props, kebapProp) ? kebapProp : prop;
+
+            return ((vnode.type.props[prop].type === Boolean && props[propName] === '') ? true : props[propName]);            
+        }
+
+        return null;
+    }  
+
 }

src/views/setup/Setup.vue

@@ -53,6 +53,17 @@ app.component('Dialog', Dialog);
 <pre v-code><code>
 &lt;Dialog&gt;&lt;/Dialog&gt;
 
+</code></pre>
+
+            <h5>Prop Cases</h5>
+            <p>Component prop names are described as camel case throughout the documentation however camel-case is also fully supported. Events on the other hand should always be camel-case.</p>
+<pre v-code><code>
+&lt;Dialog :showHeader="false"&gt;&lt;/Dialog&gt;
+
+&lt;!-- can be written as --&gt;
+
+&lt;Dialog :show-header="false"&gt;&lt;/Dialog&gt;
+
 </code></pre>
 
             <h5>Single File Components</h5>