fix(QItem/QCollapsible): fixes regarding some props

Author: rstoenescu

src/components/collapsible/QCollapsible.js

@@ -2,12 +2,14 @@ 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'
 
 export default {
   name: 'q-collapsible',
-  mixins: [ModelToggleMixin],
+  mixins: [ModelToggleMixin, ItemMixin],
   modelToggle: {
     history: false
   },
@@ -20,57 +22,14 @@ export default {
     indent: Boolean,
     group: String,
     iconToggle: Boolean,
-    separator: Boolean,
-    insetSeparator: Boolean,
     noRipple: Boolean,
     collapseIcon: String,
     opened: Boolean,
 
-    dense: Boolean,
-    sparse: Boolean,
-    multiline: Boolean,
-
-    icon: String,
-    rightIcon: String,
-    image: String,
-    rightImage: String,
-    avatar: String,
-    rightAvatar: String,
-    letter: String,
-    rightLetter: String,
-    label: String,
-    sublabel: String,
-    labelLines: [String, Number],
-    sublabelLines: [String, Number],
-
     headerStyle: [Array, String, Object],
     headerClass: [Array, String, Object]
   },
   computed: {
-    cfg () {
-      return {
-        link: !this.iconToggle,
-
-        dark: this.dark,
-        dense: this.dense,
-        sparse: this.sparse,
-        multiline: this.multiline,
-
-        icon: this.icon,
-        rightIcon: this.rightIcon,
-        image: this.image,
-        rightImage: this.rightImage,
-        avatar: this.avatar,
-        rightAvatar: this.rightAvatar,
-        letter: this.letter,
-        rightLetter: this.rightLetter,
-
-        label: this.label,
-        sublabel: this.sublabel,
-        labelLines: this.labelLines,
-        sublabelLines: this.sublabelLines
-      }
-    },
     hasRipple () {
       return __THEME__ === 'mat' && !this.noRipple && !this.disable
     },
@@ -82,6 +41,11 @@ export default {
         'q-item-inset-separator': this.insetSeparator,
         disabled: this.disable
       }
+    },
+    wrapperCfg () {
+      return extend({}, this.$props, {
+        link: !this.iconToggle
+      })
     }
   },
   watch: {
@@ -130,7 +94,7 @@ export default {
     __getItemProps (wrapper) {
       return {
         props: wrapper
-          ? { cfg: this.cfg }
+          ? { cfg: this.wrapperCfg }
           : { link: !this.iconToggle },
         style: this.headerStyle,
         'class': this.headerClass,

src/components/list/QItem.js

@@ -1,4 +1,4 @@
-import { ItemMixin, itemClasses } from './list-utils'
+import ItemMixin from '../../mixins/item'
 import { RouterLinkMixin } from '../../utils/router-link'
 
 export default {
@@ -13,7 +13,7 @@ export default {
   },
   computed: {
     classes () {
-      const cls = itemClasses(this.$props)
+      const cls = this.itemClasses
       return this.to !== void 0
         ? cls
         : [{active: this.active}, cls]

src/components/list/QItemMain.js

@@ -1,4 +1,4 @@
-import { textStyle } from './list-utils'
+import { textStyle } from '../../mixins/item'
 
 function text (h, name, val, n) {
   n = parseInt(n, 10)

src/components/list/QItemTile.js

@@ -1,5 +1,5 @@
 import { QIcon } from '../icon'
-import { textStyle } from './list-utils'
+import { textStyle } from '../../mixins/item'
 
 export default {
   name: 'q-item-tile',

src/components/list/list-utils.js

@@ -0,0 +1,54 @@
+export function textStyle (n) {
+  return n === void 0 || n < 2
+    ? {}
+    : {overflow: 'hidden', display: '-webkit-box', '-webkit-box-orient': 'vertical', '-webkit-line-clamp': n}
+}
+
+export default {
+  props: {
+    dark: Boolean,
+
+    link: Boolean,
+    dense: Boolean,
+    sparse: Boolean,
+    separator: Boolean,
+    insetSeparator: Boolean,
+    multiline: Boolean,
+    highlight: Boolean,
+
+    icon: String,
+    rightIcon: String,
+    image: String,
+    rightImage: String,
+    avatar: String,
+    rightAvatar: String,
+    letter: String,
+    rightLetter: String,
+    label: String,
+    sublabel: String,
+    labelLines: [String, Number],
+    sublabelLines: [String, Number],
+
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+  computed: {
+    itemClasses () {
+      return {
+        'q-item': true,
+        'q-item-division': true,
+        'relative-position': true,
+        'q-item-dark': this.dark,
+        'q-item-dense': this.dense,
+        'q-item-sparse': this.sparse,
+        'q-item-separator': this.separator,
+        'q-item-inset-separator': this.insetSeparator,
+        'q-item-multiline': this.multiline,
+        'q-item-highlight': this.highlight,
+        'q-item-link': this.to || this.link
+      }
+    }
+  }
+}