From fe9413c7b7a8c3b2999aafaf52d9ed579ad46ad8 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 2 Oct 2021 18:41:59 +0300
Subject: [PATCH] Fixed #1263 - Kebap-case is not supported in some components
 like DataTable

---
 src/components/datatable/BodyCell.vue   |  6 +++---
 src/components/datatable/FooterCell.vue |  5 +++--
 src/components/datatable/HeaderCell.vue |  4 ++--
 src/components/splitter/Splitter.vue    |  8 +++++---
 src/components/treetable/BodyCell.vue   |  5 ++---
 src/components/treetable/FooterCell.vue |  4 ++--
 src/components/treetable/HeaderCell.vue |  4 ++--
 src/components/utils/ObjectUtils.js     | 13 +++++++++++++
 src/views/setup/Setup.vue               | 11 +++++++++++
 9 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/src/components/datatable/BodyCell.vue b/src/components/datatable/BodyCell.vue
index 38da1f558..ceb22926a 100755
--- a/src/components/datatable/BodyCell.vue
+++ b/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'));
diff --git a/src/components/datatable/FooterCell.vue b/src/components/datatable/FooterCell.vue
index dad0b31ab..2058ff499 100644
--- a/src/components/datatable/FooterCell.vue
+++ b/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')) {
diff --git a/src/components/datatable/HeaderCell.vue b/src/components/datatable/HeaderCell.vue
index 4233a6b77..66e497dce 100644
--- a/src/components/datatable/HeaderCell.vue
+++ b/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});
diff --git a/src/components/splitter/Splitter.vue b/src/components/splitter/Splitter.vue
index 8ec46332e..817a0a138 100644
--- a/src/components/splitter/Splitter.vue
+++ b/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;
             }
 
diff --git a/src/components/treetable/BodyCell.vue b/src/components/treetable/BodyCell.vue
index 2993a8553..029447579 100644
--- a/src/components/treetable/BodyCell.vue
+++ b/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')) {
diff --git a/src/components/treetable/FooterCell.vue b/src/components/treetable/FooterCell.vue
index 84b31c01e..ee63fbb13 100644
--- a/src/components/treetable/FooterCell.vue
+++ b/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')) {
diff --git a/src/components/treetable/HeaderCell.vue b/src/components/treetable/HeaderCell.vue
index e5f6f415a..c9df5bcab 100644
--- a/src/components/treetable/HeaderCell.vue
+++ b/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')) {
diff --git a/src/components/utils/ObjectUtils.js b/src/components/utils/ObjectUtils.js
index 5dd3dd85d..3b3edd76a 100755
--- a/src/components/utils/ObjectUtils.js
+++ b/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;
+    }  
+
 }
\ No newline at end of file
diff --git a/src/views/setup/Setup.vue b/src/views/setup/Setup.vue
index 489f5e3d2..169204cc9 100755
--- a/src/views/setup/Setup.vue
+++ b/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>