perf/design(QCollapsible): remove default ripple and highlight

Author: rstoenescu

src/components/collapsible/QCollapsible.js

@@ -1,9 +1,7 @@
 import { QItem, QItemSide, QItemTile, QItemWrapper } from '../list'
 import { QSlideTransition } from '../slide-transition'
-import Ripple from '../../directives/ripple'
 import ModelToggleMixin from '../../mixins/model-toggle'
 import ItemMixin from '../../mixins/item'
-import extend from '../../utils/extend'
 
 const eventName = 'q:collapsible:close'
 
@@ -13,39 +11,28 @@ export default {
   modelToggle: {
     history: false
   },
-  directives: {
-    Ripple
-  },
   props: {
     disable: Boolean,
     popup: Boolean,
     indent: Boolean,
     group: String,
     iconToggle: Boolean,
-    noRipple: Boolean,
     collapseIcon: String,
     opened: Boolean,
 
     headerStyle: [Array, String, Object],
     headerClass: [Array, String, Object]
   },
   computed: {
-    hasRipple () {
-      return __THEME__ === 'mat' && !this.noRipple && !this.disable
-    },
     classes () {
       return {
         'q-collapsible-opened': this.popup && this.showing,
         'q-collapsible-closed': this.popup && !this.showing,
+        'q-collapsible-cursor-pointer': !this.iconToggle,
         'q-item-separator': this.separator,
         'q-item-inset-separator': this.insetSeparator,
         disabled: this.disable
       }
-    },
-    wrapperCfg () {
-      return extend({}, this.$props, {
-        link: !this.iconToggle
-      })
     }
   },
   watch: {
@@ -84,26 +71,18 @@ export default {
           nativeOn: {
             click: this.__toggleIcon
           },
-          props: { icon: this.collapseIcon || this.$q.icon.collapsible.icon },
-          directives: this.iconToggle && this.hasRipple
-            ? [{ name: 'ripple' }]
-            : null
+          props: { icon: this.collapseIcon || this.$q.icon.collapsible.icon }
         })
       ]
     },
     __getItemProps (wrapper) {
       return {
-        props: wrapper
-          ? { cfg: this.wrapperCfg }
-          : { link: !this.iconToggle },
+        props: { cfg: this.$props },
         style: this.headerStyle,
         'class': this.headerClass,
         nativeOn: {
           click: this.__toggleItem
-        },
-        directives: this.hasRipple && !this.iconToggle
-          ? [{ name: 'ripple' }]
-          : null
+        }
       }
     }
   },

src/components/collapsible/collapsible.ios.styl

@@ -30,6 +30,9 @@
   &:last-child
     padding-bottom 0
 
+.q-collapsible-cursor-pointer > .q-collapsible-inner > .q-item
+  cursor pointer
+
 .q-collapsible-toggle-icon
   border-radius 50%
   width 1em

src/components/collapsible/collapsible.mat.styl

@@ -30,6 +30,9 @@
   &:last-child
     padding-bottom 0
 
+.q-collapsible-cursor-pointer > .q-collapsible-inner > .q-item
+  cursor pointer
+
 .q-collapsible-toggle-icon
   border-radius 50%
   width 1em