From 261f4a7a13b5e5c3d316f8cbfe8202d27827ad88 Mon Sep 17 00:00:00 2001
From: Pay Duyen <duyenpay@gmail.com>
Date: Mon, 25 Nov 2019 16:11:37 +0700
Subject: [PATCH 1/9] List render listItem

---
 src/components/GList/GList.vue                | 207 ++++++++++--------
 src/components/GList/GListItem.vue            |  65 +++---
 .../GList/__story__/GList.stories.js          |  33 +++
 3 files changed, 180 insertions(+), 125 deletions(-)

diff --git a/src/components/GList/GList.vue b/src/components/GList/GList.vue
index c7c5808b..f8b3a500 100644
--- a/src/components/GList/GList.vue
+++ b/src/components/GList/GList.vue
@@ -5,102 +5,106 @@
        @click="onClick"
        ref="list"
   >
-    <template v-if="!multiSection">
-      <slot name="subheader">
-        <div v-if="subheader" class="g-list-header">{{subheader}}</div>
-      </slot>
-      <template v-for="(item, index) in renderList">
-        <slot name="listItem" :item="item" :isSelected="isActiveItem(item)" :on="getListEvents(item)"
-              :onSelect="onSelect">
-          <div v-if="item[itemTitle]"
-               class="g-list-item"
-               :class="{'g-list-item__active': isActiveItem(item), [activeClass]: isActiveItem(item), 'waves-effect': true, 'waves-auto': true}"
-               tabindex="0"
-               v-on="getListEvents(item)"
-          >
-            <slot name="prepend" :item="item" :isSelected="isActiveItem(item)">
-              <div :class="prependClasses" v-if="item.prepend &&  prependType">
-                <g-icon v-if="prependType==='icon'">{{item.prepend}}</g-icon>
-                <g-avatar v-else-if="prependType==='avatar'">
-                  <g-img :src="item.prepend"/>
-                </g-avatar>
-                <g-img v-else-if="prependType==='image'" :src="item.prepend"/>
-              </div>
-            </slot>
-            <div class="g-list-item-content">
-              <div class="g-list-item-text">{{item[itemTitle]}}</div>
-              <div class="g-list-item-text__sub"
-                   v-if="lineNumber > 1">
-                {{item.subtitle|| '&nbsp;'}}
-              </div>
-              <div class="g-list-item-text__sub" v-if="lineNumber === 3">{{item.subtitle2||'&nbsp;'}}</div>
-            </div>
-              <slot name="append" :item="item">
-                <template v-if="item.append">{{item.append}}</template>
-              </slot>
-					</div>
-					<g-divider v-if="(divider && (index < renderList.length -1) )"
-										 :inset="divider === 'inset'"/>
+		<slot>
+			<template v-if="!multiSection">
+				<slot name="subheader">
+					<div v-if="subheader" class="g-list-header">{{subheader}}</div>
 				</slot>
-			</template>
-		</template>
-
-		<template v-else>
-			<template v-for="(item, index) in items">
-				<template v-if="item.type === 'subheader'">
-					<slot name="subheader">
-						<div class="g-list-header">{{item.subheader}}</div>
+				<template v-for="(item, index) in renderList">
+					<slot name="listItem" :item="item" :isSelected="isActiveItem(item)" :on="getListEvents(item)"
+								:onSelect="onSelect">
+						<div v-if="item[itemTitle]"
+								 class="g-list-item"
+								 :class="{'g-list-item__active': isActiveItem(item), [activeClass]: isActiveItem(item), 'waves-effect': true, 'waves-auto': true}"
+								 tabindex="0"
+								 v-on="getListEvents(item)"
+						>
+							<slot name="prepend" :item="item" :isSelected="isActiveItem(item)">
+								<div :class="prependClasses" v-if="item.prepend &&  prependType">
+                <g-icon v-if="prependType==='icon'">{{item.prepend}}</g-icon>
+									<g-avatar v-else-if="prependType==='avatar'">
+										<g-img :src="item.prepend"/>
+									</g-avatar>
+									<g-img v-else-if="prependType==='image'" :src="item.prepend"/>
+								</div>
+							</slot>
+							<div class="g-list-item-content">
+								<div class="g-list-item-text">{{item[itemTitle]}}</div>
+								<div class="g-list-item-text__sub"
+										 v-if="lineNumber > 1">
+									{{item.subtitle|| '&nbsp;'}}
+								</div>
+								<div class="g-list-item-text__sub" v-if="lineNumber === 3">{{item.subtitle2||'&nbsp;'}}</div>
+							</div>
+              <slot name="append" :item="item" :isSelected="isActiveItem(item)">
+								<template v-if="item.append">{{item.append}}</template>
+							</slot>
+						</div>
+						<g-divider v-if="(divider && (index < renderList.length -1) )"
+											 :inset="divider === 'inset'"/>
 					</slot>
 				</template>
+			</template>
 
-				<g-divider v-else-if="item.type === 'divider'"></g-divider>
-
-				<slot :item="item" v-else>
-					<div class="g-list-item"
-							 :class="{'g-list-item__active': isActiveItem(item) , activeClass: isActiveItem(item), 'waves-effect': true, 'waves-auto': true}"
-							 tabindex="0"
-							 @click="onSelect(item)"
-							 @keydown.enter="onSelect(item)"
-							 @keydown.down="onArrowDown(item)"
-							 @keydown.up="onArrowUp(item)">
-						<slot name="prepend" :item="item" :isSelected="isActiveItem(item)">
-							<div :class="prependClasses" v-if="item.prepend &&  prependType">
-								<g-icon v-if="prependType==='icon'">{{item.prepend}}</g-icon>
-								<g-avatar v-else-if="prependType==='avatar'">
-									<g-img :src="item.prepend"/>
-								</g-avatar>
-								<g-img v-else-if="prependType==='image'" :src="item.prepend"/>
-							</div>
-							<div v-else>{{item.prepend}}</div>
+			<template v-else>
+				<template v-for="(item, index) in items">
+					<template v-if="item.type === 'subheader'">
+						<slot name="subheader">
+							<div class="g-list-header">{{item.subheader}}</div>
 						</slot>
+					</template>
+
+					<g-divider v-else-if="item.type === 'divider'"></g-divider>
+
+					<slot :item="item" v-else>
+						<div class="g-list-item"
+								 :class="{'g-list-item__active': isActiveItem(item) , activeClass: isActiveItem(item), 'waves-effect': true, 'waves-auto': true}"
+								 tabindex="0"
+								 @click="onSelect(item)"
+								 @keydown.enter="onSelect(item)"
+								 @keydown.down="onArrowDown(item)"
+								 @keydown.up="onArrowUp(item)">
+							<slot name="prepend" :item="item" :isSelected="isActiveItem(item)">
+								<div :class="prependClasses" v-if="item.prepend &&  prependType">
+									<g-icon v-if="prependType==='icon'">{{item.prepend}}</g-icon>
+									<g-avatar v-else-if="prependType==='avatar'">
+										<g-img :src="item.prepend"/>
+									</g-avatar>
+									<g-img v-else-if="prependType==='image'" :src="item.prepend"/>
+								</div>
+								<div v-else>{{item.prepend}}</div>
+							</slot>
+
+							<div class="g-list-item-content">
+								<div class="g-list-item-text">{{item[itemTitle]}}</div>
+								<div class="g-list-item-text__sub"
+										 v-if="lineNumber > 1">
+									{{item.subtitle || '&nbsp;'}}
+								</div>
+								<div class="g-list-item-text__sub" v-if="lineNumber === 3">{{item.subtitle2||'&nbsp;'}}</div>
+							</div>
+							<slot name="append" :item="item">
+								<template v-if="item.append">{{item.append}}</template>
+							</slot>
+
+						</div>
+					</slot>
+				</template>
+			</template>
+		</slot>
 
-            <div class="g-list-item-content">
-              <div class="g-list-item-text">{{item[itemTitle]}}</div>
-              <div class="g-list-item-text__sub"
-                   v-if="lineNumber > 1">
-                {{item.subtitle || '&nbsp;'}}
-              </div>
-              <div class="g-list-item-text__sub" v-if="lineNumber === 3">{{item.subtitle2||'&nbsp;'}}</div>
-            </div>
-            <slot name="append" :item="item">
-              <template v-if="item.append">{{item.append}}</template>
-            </slot>
-
-          </div>
-        </slot>
-      </template>
-    </template>
   </div>
 </template>
 
 <script>
-  import { computed } from '@vue/composition-api';
+  import { computed, provide, ref } from '@vue/composition-api';
   import GDivider from "../GLayout/GDivider";
   import {makeSelectable} from "../../mixins/groupable";
   import GIcon from '../GIcon/GIcon';
   import GAvatar from '../GAvatar/GAvatar';
   import GImg from '../GImg/GImg';
   import { keyCodes } from '../../utils/helpers';
+  import _ from 'lodash'
 
   export default {
     name: 'GList',
@@ -143,6 +147,7 @@
       //G list computed class
       //Computed subtitle
       const lineNumber = computed(() => {
+        if (!props.items) return
         if (!props.items.find(i => i.subtitle)) return 1;
         if (props.items.find(i => i.subtitle2)) return 3;
         return 2;
@@ -158,7 +163,7 @@
         'g-list__dense': props.dense,
         'g-list__inMenu': props.inMenu,
         'g-list__nav': props.nav,
-        'g-list__empty': !props.items.length
+        'g-list__empty': !props.items
 
       }));
 
@@ -175,27 +180,32 @@
 
       const renderList = computed(() => props.itemTitle ? props.items.filter(item => item[props.itemTitle]) : props.items)
 
-      //Select
+      //Events in list
+
+			//when no props.items provided
+      const itemsInList = ref([])
+      provide('itemsInList', itemsInList)
+
+
       function onClick(event) {
         context.emit('click', event)
       }
 
       function onArrowDown(item) {
-        let index = renderList.value.findIndex(i => i[props.itemTitle] === item[props.itemTitle] && i.subtitle === item.subtitle && i.prepend === item.prepend)
-        let i = index
-        if (index < (renderList.value.length - 1)) {
-          i += 1
-        } else {
-          i = 0
-        }
-        context.refs.list.getElementsByClassName('g-list-item')[i].focus()
+        let index = renderList.length ?
+          renderList.value.findIndex(i => i[props.itemTitle] === item[props.itemTitle] && i.subtitle === item.subtitle && i.prepend === item.prepend)
+          : itemsInList.value.findIndex(i => _.isEqual(i, item))
+        index < ( (renderList.value && renderList.value.length) || (itemsInList.value && itemsInList.value.length) - 1) ? index += 1 : index = 0
+
+        context.refs.list.getElementsByClassName('g-list-item')[index].focus()
         context.emit('keydown:down')
       }
       function onArrowUp(item) {
-        let index = renderList.value.findIndex(i => i[props.itemTitle] === item[props.itemTitle] && i.subtitle === item.subtitle && i.prepend === item.prepend)
-        let i = index
-        index > 0 ? i -= 1 : i = props.items.length -1
-        context.refs.list.getElementsByClassName('g-list-item')[i].focus()
+        let index = renderList.length ?
+					renderList.value.findIndex(i => i[props.itemTitle] === item[props.itemTitle] && i.subtitle === item.subtitle && i.prepend === item.prepend)
+					: itemsInList.value.findIndex(i => _.isEqual(i, item))
+        index > 0 ? index -= 1 : index = (renderList.value && renderList.value.length) || (itemsInList.value && itemsInList.value.length) - 1
+        context.refs.list.getElementsByClassName('g-list-item')[index].focus()
         context.emit('keydown:up')
       }
 
@@ -207,6 +217,13 @@
 
       const { internalValue, toggleItem, isActiveItem } = makeSelectable(props, context);
 
+      //handler list items in list
+
+			provide('selectedItems', internalValue)
+			provide('multiple', props.multiple)
+			provide('mandatory', props.mandatory)
+			provide('selectable', props. selectable)
+			provide('allowDuplicates', props.allowDuplicates)
       const getListEvents = (item) => {
        let listListeners ={}
         return listListeners = {
@@ -226,9 +243,11 @@
          }
         }
       }
+      provide('getListEvents', getListEvents)
 
 
       return {
+        itemsInList,
         classes,
         styles,
         prependClasses,
diff --git a/src/components/GList/GListItem.vue b/src/components/GList/GListItem.vue
index 605c91e3..bce57bd5 100644
--- a/src/components/GList/GListItem.vue
+++ b/src/components/GList/GListItem.vue
@@ -1,59 +1,62 @@
 <template>
-	<div :class="classes" :style="styles" @click="onSelectItem" @keydown="onKeyDown">
+	<div tabindex="0" :class="classes" :style="styles" v-on="listEvents(value)">
 		<slot></slot>
 	</div>
 </template>
 
 <script>
-  import { computed, ref } from '@vue/composition-api';
-	import {getInternalValue} from "../../utils/helpers";
+  import { computed, ref, inject } from '@vue/composition-api';
+  import groupable from '../../mixins/groupable';
 
   export default {
     name: 'GListItem',
     props: {
-			height: String,
-			disabled: Boolean,
-			selectable: Boolean,
+      height: String,
+      disabled: Boolean,
       twoLine: Boolean,
       threeLine: Boolean,
-			isSelected: Boolean,
-		},
-		setup(props, context) {
+      value: [String, Number, Object]
+    },
+    setup(props, context) {
       const classes = computed(() => {
         const defaultClasses = {
           'g-list-item': true,
-					'waves-effect': true
-				};
+          'waves-effect': true
+        };
         return {
           ...defaultClasses,
-					'g-list-item__disabled': props.disabled,
-					'g-list-item__selectable': props.selectable,
+          'g-list-item__disabled': props.disabled,
+          'g-list-item__selectable': props.selectable,
           'g-list-item__two-line': props.twoLine,
           'g-list-item__three-line': props.threeLine,
-					'g-list-item__active': props.isSelected,
-				}
-			});
+          'g-list-item__active': isActiveItem(props.value),
+        }
+      });
       const styles = computed(() => {
-        if(props.height) {
+        if (props.height) {
           return {
             'height': props.height
-					}
-				}
-			});
-      const onSelectItem = () => {
-        context.emit('singleItemClick')
-			}
-			const onKeyDown = (e) => {
-      	context.emit('keydown', e)
-			}
+          }
+        }
+      });
+
+      //handle listItem in List case
+      const itemsInList = inject('itemsInList').value.push(props.value)
+      const selectedItems = inject('selectedItems')
+      const multiple = inject('multiple')
+      const mandatory = inject('mandatory')
+      const allowDuplicates = inject('allowDuplicates')
+      const {isActiveItem} = groupable({ multiple, mandatory, allowDuplicates }, selectedItems)
+      const listEvents = inject('getListEvents')
 
       return {
+        itemsInList,
         classes,
-				styles,
-				onSelectItem,
-				onKeyDown,
-			}
-		}
+        styles,
+				listEvents,
+        selectedItems,
+      }
+    }
   }
 </script>
 
diff --git a/src/components/GList/__story__/GList.stories.js b/src/components/GList/__story__/GList.stories.js
index 13654fb2..8d1d70c0 100644
--- a/src/components/GList/__story__/GList.stories.js
+++ b/src/components/GList/__story__/GList.stories.js
@@ -65,6 +65,7 @@ export const gListPlayGround = () => ({
         :divider="divider"
         :prependType="prependType"
         :subtitleWrap="subtitleWrap"
+        :itemTitle="itemTitle"
       />
       `,
 })
@@ -669,6 +670,38 @@ export const gListAsMenuContent = () => ({
         </g-container>
       </div>`,
 })
+export const gListFreeRender = () => ({
+  components: { GList, GIcon, GListItemIcon, GContainer, GDivider, GRow, GBtn, GListItem, GListItemContent },
+  data() {
+    return {
+      testValue: null,
+      items:[
+        {text: 'item1', value: 1},
+        {text: 'item2', value: 2},
+        {text: 'item3', value: 3},
+      ]
+    }
+  },
+
+  template:
+    `
+      <div data-app>
+      {{testValue}}
+        <template>
+        <g-list multiple selectable v-model="testValue">
+        <g-list-item selectable :value="items[0]">
+        <g-list-item-content>Item 1</g-list-item-content>
+        </g-list-item>
+        <g-list-item >
+        <g-list-item-content>Item 2</g-list-item-content>
+        </g-list-item>
+        <g-list-item selectable :value="items[2]">
+        <g-list-item-content>Item 3</g-list-item-content>
+        </g-list-item>
+        </g-list>
+        </template>
+      </div>`,
+})
 import Vue from 'vue/dist/vue.common.js'
 import GContainer from '../../GLayout/GContainer';
 import GRow from '../../GLayout/GRow';

From 510c444dc5743cf614e635040ca531fd15923222 Mon Sep 17 00:00:00 2001
From: Pay Duyen <duyenpay@gmail.com>
Date: Mon, 25 Nov 2019 16:12:05 +0700
Subject: [PATCH 2/9] List render listItem

---
 .../__snapshots__/1-Button.stories.js.snap    | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)

diff --git a/src/components/GBtn/__story__/__snapshots__/1-Button.stories.js.snap b/src/components/GBtn/__story__/__snapshots__/1-Button.stories.js.snap
index aa6bda0d..46b4a436 100644
--- a/src/components/GBtn/__story__/__snapshots__/1-Button.stories.js.snap
+++ b/src/components/GBtn/__story__/__snapshots__/1-Button.stories.js.snap
@@ -7,3 +7,77 @@ exports[`test should test1 1`] = `
   XLARGE BUTTON
 </button>
 `;
+
+exports[`test should test1 2`] = `
+<button class="g-btn g-btn__depressed g-size__default waves-effect"
+        style="color: rgb(255, 165, 0); caret-color: #FFA500;"
+>
+  <span class="g-btn__content">
+    DEPRESSED BUTTON
+  </span>
+</button>
+`;
+
+exports[`test should test1 3`] = `
+<button class="g-btn g-btn__fab g-btn__fixed g-btn__bottom g-btn__right g-btn__round g-btn__contained bg-blue g-size__default waves-effect"
+        style="color: rgb(255, 255, 255); caret-color: #ffffff;"
+>
+  <span class="g-btn__content">
+    <i class="material-icons g-icon">
+      android
+    </i>
+  </span>
+</button>
+`;
+
+exports[`test should test1 4`] = `
+<button class="g-btn g-btn__contained g-size__default waves-effect"
+        style="color: rgb(255, 255, 255); caret-color: #ffffff;"
+>
+  <span class="g-btn__content">
+    GRADIENT BUTTON
+  </span>
+</button>
+`;
+
+exports[`test should test1 5`] = `
+<button class="g-btn g-btn__flat g-btn__icon g-btn__round g-size__default waves-effect"
+        style="color: rgb(255, 76, 76); caret-color: #FF4C4C;"
+>
+  <span class="g-btn__content">
+    <i class="material-icons g-icon">
+      star
+    </i>
+  </span>
+</button>
+`;
+
+exports[`test should test1 6`] = `
+<button class="g-btn g-btn__flat g-btn__depressed g-btn__outlined g-size__default waves-effect"
+        style="color: rgb(25, 25, 255); caret-color: #1919FF;"
+>
+  <span class="g-btn__content">
+    OUTLINED BUTTON
+  </span>
+</button>
+`;
+
+exports[`test should test1 7`] = `
+<button class="g-btn g-btn__rounded g-btn__contained bg-brown g-size__default waves-effect"
+        style="color: rgb(255, 255, 255); caret-color: #ffffff;"
+>
+  <span class="g-btn__content">
+    ROUNDED BUTTON
+  </span>
+</button>
+`;
+
+exports[`test should test1 8`] = `
+<button class="g-btn g-btn__flat g-btn__text g-size__default waves-effect"
+        style="color: rgb(50, 153, 50); caret-color: #329932;"
+>
+  <span class="g-btn__content">
+    TEXT BUTTON
+  </span>
+</button>
+`;

From a74f3d7536999a3f10596c83aa9cabd228143c0f Mon Sep 17 00:00:00 2001
From: Pay Duyen <duyenpay@gmail.com>
Date: Mon, 25 Nov 2019 16:16:01 +0700
Subject: [PATCH 3/9] code refactor

---
 src/components/GList/GList.vue | 96 ++++++++++++++++++----------------
 1 file changed, 52 insertions(+), 44 deletions(-)

diff --git a/src/components/GList/GList.vue b/src/components/GList/GList.vue
index f8b3a500..84e3d57b 100644
--- a/src/components/GList/GList.vue
+++ b/src/components/GList/GList.vue
@@ -1,10 +1,10 @@
 <template>
-  <div :class="classes"
-       class="g-list"
-       :style="styles"
-       @click="onClick"
-       ref="list"
-  >
+	<div :class="classes"
+			 :style="styles"
+			 @click="onClick"
+			 class="g-list"
+			 ref="list"
+	>
 		<slot>
 			<template v-if="!multiSection">
 				<slot name="subheader">
@@ -21,7 +21,7 @@
 						>
 							<slot name="prepend" :item="item" :isSelected="isActiveItem(item)">
 								<div :class="prependClasses" v-if="item.prepend &&  prependType">
-                <g-icon v-if="prependType==='icon'">{{item.prepend}}</g-icon>
+									<g-icon v-if="prependType==='icon'">{{item.prepend}}</g-icon>
 									<g-avatar v-else-if="prependType==='avatar'">
 										<g-img :src="item.prepend"/>
 									</g-avatar>
@@ -36,7 +36,7 @@
 								</div>
 								<div class="g-list-item-text__sub" v-if="lineNumber === 3">{{item.subtitle2||'&nbsp;'}}</div>
 							</div>
-              <slot name="append" :item="item" :isSelected="isActiveItem(item)">
+							<slot :isSelected="isActiveItem(item)" :item="item" name="append">
 								<template v-if="item.append">{{item.append}}</template>
 							</slot>
 						</div>
@@ -93,13 +93,13 @@
 			</template>
 		</slot>
 
-  </div>
+	</div>
 </template>
 
 <script>
   import { computed, provide, ref } from '@vue/composition-api';
-  import GDivider from "../GLayout/GDivider";
-  import {makeSelectable} from "../../mixins/groupable";
+  import GDivider from '../GLayout/GDivider';
+  import { makeSelectable } from '../../mixins/groupable';
   import GIcon from '../GIcon/GIcon';
   import GAvatar from '../GAvatar/GAvatar';
   import GImg from '../GImg/GImg';
@@ -108,7 +108,7 @@
 
   export default {
     name: 'GList',
-    components: {GImg, GAvatar, GIcon, GDivider},
+    components: { GImg, GAvatar, GIcon, GDivider },
     props: {
       height: String,
       width: String,
@@ -141,15 +141,21 @@
       itemValue: String,
       itemTitle: String,
       activeClass: String,
-       inMenu: Boolean,
+      inMenu: Boolean,
     },
     setup: function (props, context) {
       //G list computed class
       //Computed subtitle
       const lineNumber = computed(() => {
-        if (!props.items) return
-        if (!props.items.find(i => i.subtitle)) return 1;
-        if (props.items.find(i => i.subtitle2)) return 3;
+        if (!props.items) {
+          return
+        }
+        if (!props.items.find(i => i.subtitle)) {
+          return 1;
+        }
+        if (props.items.find(i => i.subtitle2)) {
+          return 3;
+        }
         return 2;
       })
 
@@ -168,8 +174,8 @@
       }));
 
       const styles = computed(() => ({
-        ...props.height && {'height': props.height},
-        ...props.width && {'width': props.width}
+        ...props.height && { 'height': props.height },
+        ...props.width && { 'width': props.width }
       }));
       const prependClasses = computed(() => {
         if (!['icon', 'avatar', 'image'].includes(props.prependType)) {
@@ -182,7 +188,7 @@
 
       //Events in list
 
-			//when no props.items provided
+      //when no props.items provided
       const itemsInList = ref([])
       provide('itemsInList', itemsInList)
 
@@ -195,22 +201,25 @@
         let index = renderList.length ?
           renderList.value.findIndex(i => i[props.itemTitle] === item[props.itemTitle] && i.subtitle === item.subtitle && i.prepend === item.prepend)
           : itemsInList.value.findIndex(i => _.isEqual(i, item))
-        index < ( (renderList.value && renderList.value.length) || (itemsInList.value && itemsInList.value.length) - 1) ? index += 1 : index = 0
+        index < ((renderList.value && renderList.value.length) || (itemsInList.value && itemsInList.value.length) - 1) ? index += 1 : index = 0
 
         context.refs.list.getElementsByClassName('g-list-item')[index].focus()
         context.emit('keydown:down')
       }
+
       function onArrowUp(item) {
         let index = renderList.length ?
-					renderList.value.findIndex(i => i[props.itemTitle] === item[props.itemTitle] && i.subtitle === item.subtitle && i.prepend === item.prepend)
-					: itemsInList.value.findIndex(i => _.isEqual(i, item))
+          renderList.value.findIndex(i => i[props.itemTitle] === item[props.itemTitle] && i.subtitle === item.subtitle && i.prepend === item.prepend)
+          : itemsInList.value.findIndex(i => _.isEqual(i, item))
         index > 0 ? index -= 1 : index = (renderList.value && renderList.value.length) || (itemsInList.value && itemsInList.value.length) - 1
         context.refs.list.getElementsByClassName('g-list-item')[index].focus()
         context.emit('keydown:up')
       }
 
       function onSelect(item) {
-        if (!props.selectable) return;
+        if (!props.selectable) {
+          return;
+        }
         toggleItem(item)
         context.emit('click:item')
       }
@@ -219,28 +228,27 @@
 
       //handler list items in list
 
-			provide('selectedItems', internalValue)
-			provide('multiple', props.multiple)
-			provide('mandatory', props.mandatory)
-			provide('selectable', props. selectable)
-			provide('allowDuplicates', props.allowDuplicates)
+      provide('selectedItems', internalValue)
+      provide('multiple', props.multiple)
+      provide('mandatory', props.mandatory)
+      provide('selectable', props.selectable)
+      provide('allowDuplicates', props.allowDuplicates)
       const getListEvents = (item) => {
-       let listListeners ={}
-        return listListeners = {
-         click: () => onSelect(item),
-         keydown: (e) => {
-           switch (e.keyCode) {
-             case keyCodes.down:
-               onArrowDown(item)
-               break
-             case keyCodes.up:
-               onArrowUp(item)
-               break
-             case keyCodes.enter:
-               onSelect(item)
-               break
-           }
-         }
+        return {
+          click: () => onSelect(item),
+          keydown: (e) => {
+            switch (e.keyCode) {
+              case keyCodes.down:
+                onArrowDown(item)
+                break
+              case keyCodes.up:
+                onArrowUp(item)
+                break
+              case keyCodes.enter:
+                onSelect(item)
+                break
+            }
+          }
         }
       }
       provide('getListEvents', getListEvents)

From 04209cabf5cb1aefbd0ba39b2291d618c72337aa Mon Sep 17 00:00:00 2001
From: Pay Duyen <duyenpay@gmail.com>
Date: Tue, 26 Nov 2019 06:31:41 +0700
Subject: [PATCH 4/9] fix event handlers

---
 src/components/GList/GListItem.vue            | 20 ++++++++++++---
 .../GList/__story__/GList.stories.js          | 25 +++++++++----------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/components/GList/GListItem.vue b/src/components/GList/GListItem.vue
index bce57bd5..e645fd24 100644
--- a/src/components/GList/GListItem.vue
+++ b/src/components/GList/GListItem.vue
@@ -1,11 +1,11 @@
 <template>
-	<div tabindex="0" :class="classes" :style="styles" v-on="listEvents(value)">
+	<div :class="classes" :style="styles" tabindex="0" v-on="listItemEvents(value)">
 		<slot></slot>
 	</div>
 </template>
 
 <script>
-  import { computed, ref, inject } from '@vue/composition-api';
+  import { computed, inject } from '@vue/composition-api';
   import groupable from '../../mixins/groupable';
 
   export default {
@@ -47,13 +47,25 @@
       const mandatory = inject('mandatory')
       const allowDuplicates = inject('allowDuplicates')
       const {isActiveItem} = groupable({ multiple, mandatory, allowDuplicates }, selectedItems)
-      const listEvents = inject('getListEvents')
+      const selectable = inject('selectable')
+      const inListEvents = inject('getListEvents')
+      const singleItemEvents = () => {
+        return {
+          click: () => {
+            context.emit('singleItemClick')
+          },
+          keydown: (e) => {
+            context.emit('keydown', e)
+          }
+        }
+      }
+      const listItemEvents = selectable ? inListEvents : singleItemEvents()
 
       return {
         itemsInList,
         classes,
         styles,
-				listEvents,
+        listItemEvents,
         selectedItems,
       }
     }
diff --git a/src/components/GList/__story__/GList.stories.js b/src/components/GList/__story__/GList.stories.js
index 8d1d70c0..6c1d58d4 100644
--- a/src/components/GList/__story__/GList.stories.js
+++ b/src/components/GList/__story__/GList.stories.js
@@ -1,19 +1,24 @@
 import { boolean, number, text, withKnobs } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
 import GList from '../GList';
 import GListItem from '../GListItem';
 import GDivider from '../../GLayout/GDivider.vue';
 import {
-  GListItemIcon,
-  GListItemAvatar,
+  GListHeader,
   GListItemAction,
+  GListItemAvatar,
+  GListItemContent,
+  GListItemIcon,
   GListItemImage,
   GListItemImageBig,
-  GListItemContent,
-  GListItemText,
   GListItemSubText,
-  GListHeader
+  GListItemText
 } from '../GListFunctionalComponent'
+import Vue from 'vue/dist/vue.common.js'
+import GContainer from '../../GLayout/GContainer';
+import GRow from '../../GLayout/GRow';
+import GCol from '../../GLayout/GCol';
+import GIcon from '../../GIcon/GIcon';
+import GBtn from '../../GBtn/GBtn';
 
 export default {
   title: 'GList',
@@ -689,7 +694,7 @@ export const gListFreeRender = () => ({
       {{testValue}}
         <template>
         <g-list multiple selectable v-model="testValue">
-        <g-list-item selectable :value="items[0]">
+        <g-list-item :value="items[0]">
         <g-list-item-content>Item 1</g-list-item-content>
         </g-list-item>
         <g-list-item >
@@ -702,12 +707,6 @@ export const gListFreeRender = () => ({
         </template>
       </div>`,
 })
-import Vue from 'vue/dist/vue.common.js'
-import GContainer from '../../GLayout/GContainer';
-import GRow from '../../GLayout/GRow';
-import GCol from '../../GLayout/GCol';
-import GIcon from '../../GIcon/GIcon';
-import GBtn from '../../GBtn/GBtn';
 
 
 describe('GList', function () {

From d4dfe088209d13fdc6cc6c96fc33dc0d2f33164c Mon Sep 17 00:00:00 2001
From: Pay Duyen <duyenpay@gmail.com>
Date: Wed, 27 Nov 2019 09:24:39 +0700
Subject: [PATCH 5/9] fix event handlers

---
 src/components/GList/GListItem.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/GList/GListItem.vue b/src/components/GList/GListItem.vue
index e645fd24..bfc3d0ac 100644
--- a/src/components/GList/GListItem.vue
+++ b/src/components/GList/GListItem.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-  import { computed, inject } from '@vue/composition-api';
+  import { computed, inject, ref } from '@vue/composition-api';
   import groupable from '../../mixins/groupable';
 
   export default {
@@ -49,9 +49,12 @@
       const {isActiveItem} = groupable({ multiple, mandatory, allowDuplicates }, selectedItems)
       const selectable = inject('selectable')
       const inListEvents = inject('getListEvents')
+      const internalValue = ref(null)
+      const { toggleItem } = groupable(props, internalValue)
       const singleItemEvents = () => {
         return {
           click: () => {
+            toggleItem(props.value)
             context.emit('singleItemClick')
           },
           keydown: (e) => {

From d4b81f67bc8d525de28894b501c8d13f66f0e7df Mon Sep 17 00:00:00 2001
From: Pay Duyen <duyenpay@gmail.com>
Date: Wed, 27 Nov 2019 14:55:19 +0700
Subject: [PATCH 6/9] Fix list select logic: - returnObject : return whole item
 - itemValue : return item[itemValue] - primitive array: return index of item
 in props.items Change itemTitle --> itemText Change title --> text, subtitle
 --> subtext Support primitive array display

---
 src/components/GList/GList.vue                |  84 +++---
 .../GList/__story__/GList.stories.js          | 272 +++++++++---------
 src/mixins/groupable.js                       |  59 ++--
 3 files changed, 222 insertions(+), 193 deletions(-)

diff --git a/src/components/GList/GList.vue b/src/components/GList/GList.vue
index 8dfa2220..5096ac99 100644
--- a/src/components/GList/GList.vue
+++ b/src/components/GList/GList.vue
@@ -11,16 +11,16 @@
 					<div v-if="subheader" class="g-list-header">{{subheader}}</div>
 				</slot>
 				<template v-for="(item, index) in renderList">
-					<slot name="listItem" :item="item" :isSelected="isActiveItem(item)" :on="getListEvents(item)"
+					<slot :isSelected="isActiveItem(item)" :item="item" :on="getListEvents(item, index)" name="listItem"
 								:onSelect="onSelect">
-						<div v-if="item[itemTitle]"
-								 class="g-list-item"
-								 :class="{'g-list-item__active': isActiveItem(item), [activeClass]: isActiveItem(item), 'waves-effect': true, 'waves-auto': true}"
-								 tabindex="0"
-								 v-on="getListEvents(item)"
+						<div
+								:class="{'g-list-item__active': isSelected(item, index), [activeClass]: isSelected(item, index), 'waves-effect': true, 'waves-auto': true}"
+								class="g-list-item"
+								tabindex="0"
+								v-on="getListEvents(item, index)"
 						>
 							<slot name="prepend" :item="item" :isSelected="isActiveItem(item)">
-								<div :class="prependClasses" v-if="item.prepend &&  prependType">
+								<div :class="prependClasses" v-if="item.prepend &&  prependType && itemText">
 									<g-icon v-if="prependType==='icon'">{{item.prepend}}</g-icon>
 									<g-avatar v-else-if="prependType==='avatar'">
 										<g-img :src="item.prepend"/>
@@ -29,15 +29,15 @@
 								</div>
 							</slot>
 							<div class="g-list-item-content">
-								<div class="g-list-item-text">{{item[itemTitle]}}</div>
+								<div class="g-list-item-text">{{item[itemText]||item}}</div>
 								<div class="g-list-item-text__sub"
 										 v-if="lineNumber > 1">
-									{{item.subtitle|| '&nbsp;'}}
+									{{item.subtext|| '&nbsp;'}}
 								</div>
-								<div class="g-list-item-text__sub" v-if="lineNumber === 3">{{item.subtitle2||'&nbsp;'}}</div>
+								<div class="g-list-item-text__sub" v-if="lineNumber === 3">{{item.subtext2||'&nbsp;'}}</div>
 							</div>
 							<slot :isSelected="isActiveItem(item)" :item="item" name="append">
-								<template v-if="item.append">{{item.append}}</template>
+								<template v-if="item.append && itemText">{{item.append}}</template>
 							</slot>
 						</div>
 						<g-divider v-if="(divider && (index < renderList.length -1) )"
@@ -60,10 +60,7 @@
 						<div class="g-list-item"
 								 :class="{'g-list-item__active': isActiveItem(item) , activeClass: isActiveItem(item), 'waves-effect': true, 'waves-auto': true}"
 								 tabindex="0"
-								 @click="onSelect(item)"
-								 @keydown.enter="onSelect(item)"
-								 @keydown.down="onArrowDown(item)"
-								 @keydown.up="onArrowUp(item)">
+								 v-on="getListEvents(item, index)">
 							<slot name="prepend" :item="item" :isSelected="isActiveItem(item)">
 								<div :class="prependClasses" v-if="item.prepend &&  prependType">
 									<g-icon v-if="prependType==='icon'">{{item.prepend}}</g-icon>
@@ -76,12 +73,12 @@
 							</slot>
 
 							<div class="g-list-item-content">
-								<div class="g-list-item-text">{{item[itemTitle]}}</div>
+								<div class="g-list-item-text">{{item[itemText]}}</div>
 								<div class="g-list-item-text__sub"
 										 v-if="lineNumber > 1">
-									{{item.subtitle || '&nbsp;'}}
+									{{item.subtext || '&nbsp;'}}
 								</div>
-								<div class="g-list-item-text__sub" v-if="lineNumber === 3">{{item.subtitle2||'&nbsp;'}}</div>
+								<div class="g-list-item-text__sub" v-if="lineNumber === 3">{{item.subtext2||'&nbsp;'}}</div>
 							</div>
 							<slot name="append" :item="item">
 								<template v-if="item.append">{{item.append}}</template>
@@ -135,31 +132,32 @@
         type: String,
         default: 'avatar',
       },
-      subtitleWrap: Boolean,
+      subtextWrap: Boolean,
       value: [String, Object, Number, Array],
       selectable: Boolean,
       multiple: Boolean,
       mandatory: Boolean,
       allowDuplicates: Boolean,
       itemValue: String,
-      itemTitle: {
+      itemText: {
         type: String,
         default: 'title'
       },
       activeClass: String,
       inMenu: Boolean,
+      returnObject: Boolean,
     },
     setup: function (props, context) {
       //G list computed class
-      //Computed subtitle
+      //Computed subtext
       const lineNumber = computed(() => {
         if (!props.items) {
           return
         }
-        if (!props.items.find(i => i.subtitle)) {
+        if (!props.items.find(i => i.subtext)) {
           return 1;
         }
-        if (props.items.find(i => i.subtitle2)) {
+        if (props.items.find(i => i.subtext2)) {
           return 3;
         }
         return 2;
@@ -167,8 +165,8 @@
 
       const classes = computed(() => ({
         'g-list__disabled': props.disabled,
-        'g-list__two-line': (lineNumber.value === 2 && !props.subtitleWrap),
-        'g-list__three-line': (lineNumber.value === 2 && props.subtitleWrap) || lineNumber.value === 3,
+        'g-list__two-line': (lineNumber.value === 2 && !props.subtextWrap),
+        'g-list__three-line': (lineNumber.value === 2 && props.subtextWrap) || lineNumber.value === 3,
         'g-list__rounded': props.rounded,
         'g-list__shaped': props.shaped,
         ['elevation-' + props.elevation]: true,
@@ -191,10 +189,13 @@
       })
 
 
-      const renderList = computed(() => _.map(props.items, (value) => {
-          if (_.isObject(value)) return value
-          else return {[props.itemTitle]: value} // when props.items is an array of primitives
-        }))
+      const isObjectList = computed(() => props.items.some(item => _.isObject(item) === true))
+      const renderList = computed(() => {
+        return isObjectList.value ? props.items.filter(item => item[props.itemText]) : props.items
+      })
+      const isSelected = (item, index) => {
+        return isObjectList.value ? isActiveItem(item) : isActiveItem(index)
+      }
 
       //Events in list
 
@@ -207,27 +208,22 @@
         context.emit('click', event)
       }
 
-      function onArrowDown(item) {
-        let index = renderList.length ?
-          renderList.value.findIndex(i => i[props.itemTitle] === item[props.itemTitle] && i.subtitle === item.subtitle && i.prepend === item.prepend)
-          : itemsInList.value.findIndex(i => _.isEqual(i, item))
-        index < ((renderList.value && renderList.value.length) || (itemsInList.value && itemsInList.value.length) - 1) ? index += 1 : index = 0
-
+      function onArrowDown(index) {
+        index < ((renderList.value && renderList.value.length) - 1 || (itemsInList.value && itemsInList.value.length) - 1) ? index += 1 : index = 0
         context.refs.list.getElementsByClassName('g-list-item')[index].focus()
         context.emit('keydown:down')
       }
 
-      function onArrowUp(item) {
-        let index = renderList.length ?
-          renderList.value.findIndex(i => i[props.itemTitle] === item[props.itemTitle] && i.subtitle === item.subtitle && i.prepend === item.prepend)
-          : itemsInList.value.findIndex(i => _.isEqual(i, item))
+      function onArrowUp(index) {
         index > 0 ? index -= 1 : index = (renderList.value && renderList.value.length) || (itemsInList.value && itemsInList.value.length) - 1
         context.refs.list.getElementsByClassName('g-list-item')[index].focus()
         context.emit('keydown:up')
       }
 
       function onSelect(item) {
-        if (!props.selectable) return;
+        if (!props.selectable) {
+          return;
+        }
         toggleItem(item)
         context.emit('click:item')
       }
@@ -241,16 +237,16 @@
       provide('mandatory', props.mandatory)
       provide('selectable', props.selectable)
       provide('allowDuplicates', props.allowDuplicates)
-      const getListEvents = (item) => {
+      const getListEvents = (item, index) => {
         return {
           click: () => onSelect(item),
           keydown: (e) => {
             switch (e.keyCode) {
               case keyCodes.down:
-                onArrowDown(item)
+                onArrowDown(index)
                 break
               case keyCodes.up:
-                onArrowUp(item)
+                onArrowUp(index)
                 break
               case keyCodes.enter:
                 onSelect(item)
@@ -274,8 +270,10 @@
         onArrowUp,
         onSelect,
         internalValue,
+        isSelected,
         isActiveItem,
         getListEvents,
+        isObjectList,
       }
     }
   }
diff --git a/src/components/GList/__story__/GList.stories.js b/src/components/GList/__story__/GList.stories.js
index d415c70c..b2a1d24a 100644
--- a/src/components/GList/__story__/GList.stories.js
+++ b/src/components/GList/__story__/GList.stories.js
@@ -29,10 +29,10 @@ export const gListPlayGround = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ]
     }
   },
@@ -47,13 +47,13 @@ export const gListPlayGround = () => ({
     subheader: { default: text('subheader', 'subheader') },
     divider: { type: [String, Boolean], default: boolean('divider', false) },
     prependType: { default: text('prependType', 'avatar') },
-    subtitleWrap: { default: boolean('subtitleWrap', false) },
+    subtextWrap: { default: boolean('subtextWrap', false) },
     selectable: { default: boolean('selectable', false) },
     multiple: { default: boolean('multiple', false) },
     mandatory: { default: boolean('mandatory', false) },
     allowDuplicates: { default: boolean('allowDuplicates', false) },
     itemValue: { default: text('itemValue', '') },
-    itemTitle: { default: text('itemTitle', 'title') },
+    itemText: { default: text('itemText', 'text') },
     activeClass: { default: text('activeClass', '') },
   },
   template:
@@ -69,8 +69,8 @@ export const gListPlayGround = () => ({
         :subheader="subheader"
         :divider="divider"
         :prependType="prependType"
-        :subtitleWrap="subtitleWrap"
-        :itemTitle="itemTitle"
+        :subtextWrap="subtextWrap"
+        :itemText="itemText"
       />
       `,
 })
@@ -79,12 +79,12 @@ export const gListSingleSelectPlayGround = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ],
-      testValue: null
+      testValue: ''
     }
   },
   props: {
@@ -98,11 +98,12 @@ export const gListSingleSelectPlayGround = () => ({
     subheader: { default: text('subheader', 'subheader') },
     divider: { type: [String, Boolean], default: boolean('divider', false) },
     prependType: { default: text('prependType', 'avatar') },
-    subtitleWrap: { default: boolean('subtitleWrap', false) },
+    subtextWrap: { default: boolean('subtextWrap', false) },
     mandatory: { default: boolean('mandatory', false) },
-    itemValue: { default: text('itemValue', '') },
-    itemTitle: { default: text('itemTitle', 'title') },
+    itemValue: { default: text('itemValue', 'prepend') },
+    itemText: { default: text('itemText', 'text') },
     activeClass: { default: text('activeClass', '') },
+    returnObject: { default: boolean('returnObject', true) },
   },
   template:
     ` 
@@ -119,12 +120,14 @@ export const gListSingleSelectPlayGround = () => ({
         :subheader="subheader"
         :divider="divider"
         :prependType="prependType"
-        :subtitleWrap="subtitleWrap"
+        :subtextWrap="subtextWrap"
         selectable
         :mandatory="mandatory"
         :itemValue="itemValue"
-        :itemTitle="itemTitle"
-        :activeClass="activeClass">
+        :itemText="itemText"
+        :activeClass="activeClass"
+        :returnObject="returnObject"
+        >
       </g-list>
       </div>
       `,
@@ -134,12 +137,12 @@ export const gListMultiSelectPlayGround = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ],
-      testValue: null
+      testValue: ['Jason Oner']
     }
   },
   props: {
@@ -153,13 +156,14 @@ export const gListMultiSelectPlayGround = () => ({
     subheader: { default: text('subheader', 'subheader') },
     divider: { type: [String, Boolean], default: boolean('divider', false) },
     prependType: { default: text('prependType', 'avatar') },
-    subtitleWrap: { default: boolean('subtitleWrap', false) },
+    subtextWrap: { default: boolean('subtextWrap', false) },
     multiple: { default: boolean('multiple', true) },
     mandatory: { default: boolean('mandatory', false) },
     allowDuplicates: { default: boolean('allowDuplicates', true) },
-    itemValue: { default: text('itemValue', '') },
-    itemTitle: { default: text('itemTitle', 'title') },
+    itemValue: { default: text('itemValue', 'text') },
+    itemText: { default: text('itemText', 'text') },
     activeClass: { default: text('activeClass', '') },
+    returnObject: { default: boolean('returnObject', false) },
   },
   template:
     ` 
@@ -176,13 +180,14 @@ export const gListMultiSelectPlayGround = () => ({
         :subheader="subheader"
         :divider="divider"
         :prependType="prependType"
-        :subtitleWrap="subtitleWrap"
+        :subtextWrap="subtextWrap"
         selectable
         :multiple="multiple"
         :mandatory="mandatory"
         :allowDuplicates="allowDuplicates"
         :itemValue="itemValue"
-        :itemTitle="itemTitle"
+        :itemText="itemText"
+        :returnObject="returnObject"
         :activeClass="activeClass">
       </g-list>
       </div>
@@ -193,10 +198,10 @@ export const gListInset = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/1.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/1.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ]
     }
   },
@@ -215,10 +220,10 @@ export const gListDense = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant, ants work together to gather food and care for the young, and their behavior is surprisingly coordinated and methodical for such seemingly simple insects. ', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant, ants work together to gather food and care for the young, and their behavior is surprisingly coordinated and methodical for such seemingly simple insects. ', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ]
     }
   },
@@ -230,7 +235,7 @@ export const gListDense = () => ({
         <g-row>Two-line</g-row>
         <g-row><g-list :items="items" :dense="dense" subheader="subheader" divider='inset' /> </g-row>
         <g-row>Two-line with wrapper</g-row>
-         <g-row><g-list :items="items"  :dense="dense" subheader="subheader" divider='inset' subtitleWrap/></g-row>
+         <g-row><g-list :items="items"  :dense="dense" subheader="subheader" divider='inset' subtextWrap/></g-row>
     </g-container>`,
 })
 export const gListShapedInset = () => ({
@@ -238,10 +243,10 @@ export const gListShapedInset = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant, ants work together to gather food and care for the young, and their behavior is surprisingly coordinated and methodical for such seemingly simple insects. ', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant, ants work together to gather food and care for the young, and their behavior is surprisingly coordinated and methodical for such seemingly simple insects. ', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ]
     }
   },
@@ -261,10 +266,10 @@ export const gListNav = () => ({
   data() {
     return {
       items: [
-        {title: 'Jason Oner', subtitle: "Jason the ant", prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg'},
-        {title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg'},
-        {title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg'},
-        {title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg'},
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ]
     }
   },
@@ -283,10 +288,10 @@ export const gListTwoLine = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant, ants work together to gather food and care for the young, and their behavior is surprisingly coordinated and methodical for such seemingly simple insects.', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant, ants work together to gather food and care for the young, and their behavior is surprisingly coordinated and methodical for such seemingly simple insects.', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ],
 
     }
@@ -302,16 +307,16 @@ export const gListTwoLineWithWrapper = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant, ants work together to gather food and care for the young, and their behavior is surprisingly coordinated and methodical for such seemingly simple insects. ', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', subtitle: 'Ranee the cockroach', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant, ants work together to gather food and care for the young, and their behavior is surprisingly coordinated and methodical for such seemingly simple insects. ', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', subtext: 'Ranee the cockroach', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ]
     }
   },
   template:
     `
-      <g-list :items="items" rounded dense subheader="subheader" divider='inset' subtitleWrap >
+      <g-list :items="items" rounded dense subheader="subheader" divider='inset' subtextWrap >
       </g-list>
       `,
 })
@@ -320,16 +325,16 @@ export const gListThreeLine = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant', subtitle2: 'ants work together to gather food and care for the young, and their behavior is surprisingly coordinated and methodical for such seemingly simple insects. ', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', subtext2: 'ants work together to gather food and care for the young, and their behavior is surprisingly coordinated and methodical for such seemingly simple insects. ', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ]
     }
   },
   template:
     `
-      <g-list :items="items" rounded  subheader="subheader" divider='inset' subtitleWrap >
+      <g-list :items="items" rounded  subheader="subheader" divider='inset' subtextWrap >
       </g-list>
       `,
 })
@@ -338,10 +343,10 @@ export const gListPrependWithSlot = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ]
     }
   },
@@ -359,10 +364,10 @@ export const gListAppendWithSlot = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ]
     }
   },
@@ -381,12 +386,12 @@ export const gListNormalPrependAvatar = () => ({
     return {
       items: [
         { subheader: 'User', type: 'subheader' },
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
         { type: 'divider' },
         { subheader: 'Admin', type: 'subheader' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
         { subheader: 'Admin', type: 'subheader' },
 
       ]
@@ -405,12 +410,12 @@ export const gListNormalPrependIcon = () => ({
     return {
       items: [
         { subheader: 'User', type: 'subheader' },
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'mdi-pen' },
-        { title: 'Ranee Carlson', prepend: 'mdi-ninja' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'mdi-pen' },
+        { text: 'Ranee Carlson', prepend: 'mdi-ninja' },
         { type: 'divider' },
         { subheader: 'Admin', type: 'subheader' },
-        { title: 'Cindy Baker', prepend: 'mdi-glasses' },
-        { title: 'Ali Connors', prepend: 'mdi-mail' },
+        { text: 'Cindy Baker', prepend: 'mdi-glasses' },
+        { text: 'Ali Connors', prepend: 'mdi-mail' },
         { subheader: 'Admin', type: 'subheader' },
 
       ]
@@ -428,10 +433,10 @@ export const gListNormalPrependImg = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ]
     }
   },
@@ -448,12 +453,12 @@ export const gListMultiSection = () => ({
     return {
       items: [
         { subheader: 'User', type: 'subheader' },
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
         { type: 'divider' },
         { subheader: 'Admin', type: 'subheader' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
         /*{subheader: 'Admin', type: 'subheader'},*/
       ]
     }
@@ -470,10 +475,10 @@ export const gListSingleSectionSelect = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ],
       testValue: 1
     }
@@ -494,12 +499,12 @@ export const gListMultiSectionSelect = () => ({
     return {
       items: [
         { subheader: 'User', type: 'subheader' },
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
         { type: 'divider' },
         { subheader: 'Admin', type: 'subheader' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
         /*{subheader: 'Admin', type: 'subheader'},*/
       ],
       testValue: 1,
@@ -520,10 +525,10 @@ export const gListItemSlotRenderArray = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ],
       testValue: 1
     }
@@ -536,7 +541,7 @@ export const gListItemSlotRenderArray = () => ({
               <template v-slot:listItem="{item, isSelected, onSelect}">
                 <g-list-item :item="item" :isSelected="isSelected" @singleItemClick="onSelect(item)" >
                   <g-list-item-content>
-                      <g-list-item-text >{{item.title}}</g-list-item-text>
+                      <g-list-item-text >{{item.text}}</g-list-item-text>
                   </g-list-item-content>
                 </g-list-item>
               </template>
@@ -550,10 +555,10 @@ export const gListMultiSelect = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ],
       testValue: null
     }
@@ -578,10 +583,10 @@ export const gListSelectMandatory = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ],
       testValue: null
     }
@@ -601,10 +606,10 @@ export const gListCustomActiveClass = () => ({
   data() {
     return {
       items: [
-        { title: 'Jason Oner', subtitle: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
-        { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
-        { title: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
+        { text: 'Jason Oner', subtext: 'Jason the ant', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
+        { text: 'Ali Connors', prepend: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
       ],
       testValue: null
     }
@@ -626,19 +631,19 @@ export const gListAsMenuContent = () => ({
   data() {
     return {
       list1: [
-        { title: 'Profile', prepend: 'person' },
-        { title: 'Chat', prepend: 'chat' },
-        { title: 'Help', prepend: 'help' },
+        { text: 'Profile', prepend: 'person' },
+        { text: 'Chat', prepend: 'chat' },
+        { text: 'Help', prepend: 'help' },
         { type: 'divider' },
-        { title: 'Lock', prepend: 'lock' },
-        { title: 'Log out', prepend: 'keyboard_tab' },
+        { text: 'Lock', prepend: 'lock' },
+        { text: 'Log out', prepend: 'keyboard_tab' },
       ],
       list2:[
-        { title: ' A new order has been placed!', subtitle: '2 hours ago', prepend: 'add_shopping_cart', color: 'cyan' },
-        { title: '  Completed the task', subtitle: '3 days ago', prepend: 'star', color: 'red' },
-        { title: '  Settings updated', subtitle: '4 days ago', prepend: 'settings', color: 'teal' },
-        { title: ' Settings updated', subtitle: '6 days ago', prepend: 'today', color: 'deep-orange' },
-        { title: '  Generate monthly report', subtitle: '1 week ago', prepend: 'trending_up', color: 'amber' },
+        { text: ' A new order has been placed!', subtext: '2 hours ago', prepend: 'add_shopping_cart', color: 'cyan' },
+        { text: '  Completed the task', subtext: '3 days ago', prepend: 'star', color: 'red' },
+        { text: '  Settings updated', subtext: '4 days ago', prepend: 'settings', color: 'teal' },
+        { text: ' Settings updated', subtext: '6 days ago', prepend: 'today', color: 'deep-orange' },
+        { text: '  Generate monthly report', subtext: '1 week ago', prepend: 'trending_up', color: 'amber' },
       ],
       testValue: null
     }
@@ -680,7 +685,8 @@ export const gListPrimitiveItems = () => ({
   components: { GDivider, GListItem, GList, GListItemIcon, GListItemAvatar, GListItemAction, GListItemImage, GListItemImageBig, GListItemContent, GListItemText, GListItemSubText, GListHeader },
   data() {
     return {
-      items: ['Jason Oner', 'Ranee Carlson', 'Cindy Baker', 'Ali Connors']
+      items: ['Jason Oner', 'Ranee Carlson', 'Cindy Baker', 'Ali Connors'],
+      selectedValue: null
     }
   },
   props: {
@@ -694,17 +700,20 @@ export const gListPrimitiveItems = () => ({
     subheader: { default: text('subheader', 'subheader') },
     divider: { type: [String, Boolean], default: boolean('divider', false) },
     prependType: { default: text('prependType', 'avatar') },
-    subtitleWrap: { default: boolean('subtitleWrap', false) },
-    selectable: { default: boolean('selectable', false) },
-    multiple: { default: boolean('multiple', false) },
+    subtextWrap: { default: boolean('subtextWrap', false) },
+    selectable: { default: boolean('selectable', true) },
+    multiple: { default: boolean('multiple', true) },
     mandatory: { default: boolean('mandatory', false) },
     allowDuplicates: { default: boolean('allowDuplicates', false) },
     itemValue: { default: text('itemValue', '') },
-    itemTitle: { default: text('itemTitle', 'title') },
+    itemText: { default: text('itemText', '') },
     activeClass: { default: text('activeClass', '') },
+
   },
   template:
       `
+<div>
+{{selectedValue}}
       <g-list :items="items"
         :disabled="disabled"
         :rounded="rounded"
@@ -716,17 +725,18 @@ export const gListPrimitiveItems = () => ({
         :subheader="subheader"
         :divider="divider"
         :prependType="prependType"
-        :subtitleWrap="subtitleWrap"
+        :subtextWrap="subtextWrap"
+        :selectable="selectable"
+        :multiple="multiple"
+        allowDuplicates
+        v-model="selectedValue"
+        returnObject
       />
+</div>
+
       `,
 })
 
-import Vue from 'vue/dist/vue.common.js'
-import GContainer from '../../GLayout/GContainer';
-import GRow from '../../GLayout/GRow';
-import GCol from '../../GLayout/GCol';
-import GIcon from '../../GIcon/GIcon';
-import GBtn from '../../GBtn/GBtn';
 export const gListFreeRender = () => ({
   components: { GList, GIcon, GListItemIcon, GContainer, GDivider, GRow, GBtn, GListItem, GListItemContent },
   data() {
diff --git a/src/mixins/groupable.js b/src/mixins/groupable.js
index 67515711..2a34e618 100644
--- a/src/mixins/groupable.js
+++ b/src/mixins/groupable.js
@@ -1,23 +1,23 @@
 import _ from 'lodash'
-import { computed, ref, watch } from '@vue/composition-api';
+import { ref, watch } from '@vue/composition-api';
 
 function groupable(props, vModel) {
   //mandatory: requires at least 1 to be active at all times, unless value is null/undefined (at init)
   //multiple: multiple items can be active at a time
   //allowDuplicate: choose one item multiple times
-  const { returnObject = true, items, mandatory, multiple, allowDuplicates, maxSelection } = props
+  const { returnObject = true, items, mandatory, multiple, allowDuplicates, maxSelection, itemValue, itemText } = props
   const toggleItem = (item) => {
     if (multiple) {
-      if (returnObject) {
+      if (returnObject && itemText) {
         updateMultiple(item);
       } else {
-        updateMultiple(items.indexOf(item))
+        itemValue ? updateMultiple(item[itemValue]) : updateMultiple(items.indexOf(item))
       }
     } else {
-      if (returnObject) {
+      if (returnObject && itemText) {
         updateSingle(item);
       } else {
-        updateSingle(items.indexOf(item))
+        itemValue ? updateSingle(item[itemValue]) : updateSingle(items.indexOf(item))
       }
     }
   };
@@ -32,7 +32,7 @@ function groupable(props, vModel) {
 
   const updateMultiple = (item) => {
     const clonedValue = _.clone(vModel.value);
-    const itemIndex = clonedValue.findIndex((i) => i === item);
+    const itemIndex = clonedValue.findIndex((i) => _.isEqual(i, item));
     //item exists + mandatory
     if (itemIndex > -1 && mandatory && clonedValue.length - 1 < 1) {
       return;
@@ -55,13 +55,19 @@ function groupable(props, vModel) {
 
   const isActiveItem = (item) => {
     if (multiple) {
-      return returnObject
-        ? vModel.value.some(element => _.isEqual(element, item))
-        : vModel.value.includes(items.indexOf(item))
+      if (returnObject) {
+        return vModel.value.some(element => _.isEqual(element, item))
+      } else {
+        return itemValue
+          ? vModel.value.some(element => element === item[itemValue])
+          : vModel.value.includes(items.indexOf(item))
+      }
+    }
+    if (returnObject) {
+      return _.isEqual(vModel.value, item)
+    } else {
+      return itemValue ? item[itemValue] === vModel.value : items.indexOf(item) === vModel.value
     }
-    return returnObject
-      ? _.isEqual(vModel.value, item)
-      : items.indexOf(item) === vModel.value
   };
 
   return {
@@ -71,18 +77,33 @@ function groupable(props, vModel) {
 }
 
 export function makeSelectable(props, context) {
+
   // 1 -> {a: 1, b: 2}
   const convertValueToInternalValue = function (value) {
-    if (!props.itemValue || !value) return value;
-    if (!Array.isArray(props.value)) return props.items.find(i => i[props.itemValue] === value);
-    return props.items.filter(i => value.includes(i[props.itemValue]));
+    if (!props.itemValue || !value) {
+      return value;
+    }
+    if (!Array.isArray(props.value)) {
+      return props.returnObject
+        ? props.items.find(i => i[props.itemValue] === value)
+        : props.items.find(i => i[props.itemValue] === value)[props.itemValue];
+    }
+    if (props.returnObject) {
+      return props.items.filter(i => value.includes(i[props.itemValue]))
+    } else if (props.itemValue) {
+      return value
+    }
   }
 
   // {a: 1, b: 2} -> 1
   const convertInternalValueToValue = function (internalValue) {
-    if (!props.itemValue || !internalValue) return internalValue;
-    if (!Array.isArray(internalValue)) return internalValue[props.itemValue];
-    return internalValue.map(i => i[props.itemValue]);
+    if (!props.itemValue || !internalValue) {
+      return internalValue;
+    }
+    if (!Array.isArray(internalValue)) {
+      return props.returnObject ? internalValue : internalValue[props.itemValue];
+    }
+    return internalValue.map(i => props.returnObject ? i : i);
   }
 
   let rawInternalValue;

From 11fce2d2a7e7a499d04cc62dc567b6fe6a0fcdfe Mon Sep 17 00:00:00 2001
From: Pay Duyen <duyenpay@gmail.com>
Date: Wed, 27 Nov 2019 15:01:12 +0700
Subject: [PATCH 7/9] Fix active item logic

---
 src/components/GList/GList.vue                  | 2 +-
 src/components/GList/__story__/GList.stories.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/GList/GList.vue b/src/components/GList/GList.vue
index 5096ac99..0e2195b1 100644
--- a/src/components/GList/GList.vue
+++ b/src/components/GList/GList.vue
@@ -14,7 +14,7 @@
 					<slot :isSelected="isActiveItem(item)" :item="item" :on="getListEvents(item, index)" name="listItem"
 								:onSelect="onSelect">
 						<div
-								:class="{'g-list-item__active': isSelected(item, index), [activeClass]: isSelected(item, index), 'waves-effect': true, 'waves-auto': true}"
+								:class="{'g-list-item__active': isActiveItem(item), [activeClass]: isActiveItem(item), 'waves-effect': true, 'waves-auto': true}"
 								class="g-list-item"
 								tabindex="0"
 								v-on="getListEvents(item, index)"
diff --git a/src/components/GList/__story__/GList.stories.js b/src/components/GList/__story__/GList.stories.js
index b2a1d24a..43297bed 100644
--- a/src/components/GList/__story__/GList.stories.js
+++ b/src/components/GList/__story__/GList.stories.js
@@ -730,7 +730,7 @@ export const gListPrimitiveItems = () => ({
         :multiple="multiple"
         allowDuplicates
         v-model="selectedValue"
-        returnObject
+       
       />
 </div>
 

From 48202b8491165c2bcd282f98e876e0cdd971cafe Mon Sep 17 00:00:00 2001
From: Lam Phan Dang <lam.phan@gigasouce.io>
Date: Wed, 27 Nov 2019 15:11:57 +0700
Subject: [PATCH 8/9] Fix bug: Combobox returns Object instead of primitive
 value

---
 src/components/GList/GList.vue                |  26 ++--
 .../GList/__story__/GList.stories.js          |  10 +-
 src/mixins/groupable.js                       | 124 ++++++++----------
 3 files changed, 74 insertions(+), 86 deletions(-)

diff --git a/src/components/GList/GList.vue b/src/components/GList/GList.vue
index e342885a..66b07997 100644
--- a/src/components/GList/GList.vue
+++ b/src/components/GList/GList.vue
@@ -10,15 +10,15 @@
         <div v-if="subheader" class="g-list-header">{{subheader}}</div>
       </slot>
       <template v-for="(item, index) in renderList">
-        <slot name="listItem" :item="item" :isSelected="isActiveItem(item)" :on="getListEvents(item)"
+        <slot name="listItem" :item="item" :isSelected="isActiveItem(item, index)" :on="getListEvents(item)"
               :onSelect="onSelect">
           <div v-if="item[itemTitle]"
                class="g-list-item"
-               :class="{'g-list-item__active': isActiveItem(item), [activeClass]: isActiveItem(item), 'waves-effect': true, 'waves-auto': true}"
+               :class="{'g-list-item__active': isActiveItem(item, index), [activeClass]: isActiveItem(item, index), 'waves-effect': true, 'waves-auto': true}"
                tabindex="0"
-               v-on="getListEvents(item)"
+               v-on="getListEvents(item, index)"
           >
-            <slot name="prepend" :item="item" :isSelected="isActiveItem(item)">
+            <slot name="prepend" :item="item" :isSelected="isActiveItem(item, index)">
               <div :class="prependClasses" v-if="item.prepend &&  prependType">
                 <g-icon v-if="prependType==='icon'">{{item.prepend}}</g-icon>
                 <g-avatar v-else-if="prependType==='avatar'">
@@ -57,13 +57,13 @@
 
 				<slot :item="item" v-else>
 					<div class="g-list-item"
-							 :class="{'g-list-item__active': isActiveItem(item) , activeClass: isActiveItem(item), 'waves-effect': true, 'waves-auto': true}"
+							 :class="{'g-list-item__active': isActiveItem(item, index) , activeClass: isActiveItem(item, index), 'waves-effect': true, 'waves-auto': true}"
 							 tabindex="0"
-							 @click="onSelect(item)"
-							 @keydown.enter="onSelect(item)"
+							 @click="onSelect(item, index)"
+							 @keydown.enter="onSelect(item, index)"
 							 @keydown.down="onArrowDown(item)"
 							 @keydown.up="onArrowUp(item)">
-						<slot name="prepend" :item="item" :isSelected="isActiveItem(item)">
+						<slot name="prepend" :item="item" :isSelected="isActiveItem(item, index)">
 							<div :class="prependClasses" v-if="item.prepend &&  prependType">
 								<g-icon v-if="prependType==='icon'">{{item.prepend}}</g-icon>
 								<g-avatar v-else-if="prependType==='avatar'">
@@ -210,18 +210,18 @@
         context.emit('keydown:up')
       }
 
-      function onSelect(item) {
+      function onSelect(item, index) {
         if (!props.selectable) return;
-        toggleItem(item)
+        toggleItem(item, index)
         context.emit('click:item')
       }
 
       const { internalValue, toggleItem, isActiveItem } = makeSelectable(props, context);
 
-      const getListEvents = (item) => {
+      const getListEvents = (item, index) => {
        let listListeners ={}
         return listListeners = {
-         click: () => onSelect(item),
+         click: () => onSelect(item, index),
          keydown: (e) => {
            switch (e.keyCode) {
              case keyCodes.down:
@@ -231,7 +231,7 @@
                onArrowUp(item)
                break
              case keyCodes.enter:
-               onSelect(item)
+               onSelect(item, index)
                break
            }
          }
diff --git a/src/components/GList/__story__/GList.stories.js b/src/components/GList/__story__/GList.stories.js
index 08cb556e..a343a35d 100644
--- a/src/components/GList/__story__/GList.stories.js
+++ b/src/components/GList/__story__/GList.stories.js
@@ -24,6 +24,8 @@ export const gListPlayGround = () => ({
   data() {
     return {
       items: [
+        { title: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { title: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
         { title: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
         { title: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
         { title: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
@@ -65,6 +67,9 @@ export const gListPlayGround = () => ({
         :divider="divider"
         :prependType="prependType"
         :subtitleWrap="subtitleWrap"
+        :selectable="selectable"
+        :multiple="multiple"
+        :mandatory="mandatory"
       />
       `,
 })
@@ -674,7 +679,7 @@ export const gListPrimitiveItems = () => ({
   components: { GDivider, GListItem, GList, GListItemIcon, GListItemAvatar, GListItemAction, GListItemImage, GListItemImageBig, GListItemContent, GListItemText, GListItemSubText, GListHeader },
   data() {
     return {
-      items: ['Jason Oner', 'Ranee Carlson', 'Cindy Baker', 'Ali Connors']
+      items: ['Jason Oner', 'Jason Oner', 'Jason Oner', 'Ranee Carlson', 'Cindy Baker', 'Ali Connors']
     }
   },
   props: {
@@ -711,6 +716,9 @@ export const gListPrimitiveItems = () => ({
         :divider="divider"
         :prependType="prependType"
         :subtitleWrap="subtitleWrap"
+        :selectable="selectable"
+        :multiple="multiple"
+        :mandatory="mandatory"
       />
       `,
 })
diff --git a/src/mixins/groupable.js b/src/mixins/groupable.js
index 67515711..ec4e4be5 100644
--- a/src/mixins/groupable.js
+++ b/src/mixins/groupable.js
@@ -1,68 +1,48 @@
 import _ from 'lodash'
-import { computed, ref, watch } from '@vue/composition-api';
+import { ref, watch } from '@vue/composition-api'
 
 function groupable(props, vModel) {
   //mandatory: requires at least 1 to be active at all times, unless value is null/undefined (at init)
   //multiple: multiple items can be active at a time
   //allowDuplicate: choose one item multiple times
-  const { returnObject = true, items, mandatory, multiple, allowDuplicates, maxSelection } = props
+  if (typeof props.returnObject === 'undefined') props.returnObject = true
+
   const toggleItem = (item) => {
-    if (multiple) {
-      if (returnObject) {
-        updateMultiple(item);
-      } else {
-        updateMultiple(items.indexOf(item))
-      }
-    } else {
-      if (returnObject) {
-        updateSingle(item);
-      } else {
-        updateSingle(items.indexOf(item))
-      }
-    }
-  };
+    if (props.returnObject) item = props.items.indexOf(item)
+
+    if (props.multiple) updateMultiple(item)
+    else updateSingle(item)
+  }
 
   const updateSingle = (item) => {
-    const isSame = _.isEqual(vModel.value, item);
-    if (isSame && mandatory) {
-      return;
-    }
-    vModel.value = isSame ? null : item;
-  };
+    const isSame = vModel.value === item
+
+    if (isSame && props.mandatory) return
+
+    vModel.value = isSame ? null : item
+  }
 
   const updateMultiple = (item) => {
-    const clonedValue = _.clone(vModel.value);
-    const itemIndex = clonedValue.findIndex((i) => i === item);
-    //item exists + mandatory
-    if (itemIndex > -1 && mandatory && clonedValue.length - 1 < 1) {
-      return;
+    if (!vModel.value) vModel.value = []
+
+    const itemIndex = vModel.value.findIndex(e => e === item)
+    if (itemIndex > -1) {
+      if (props.mandatory && vModel.value.length < 2) return
+
+      if (!props.allowDuplicates) vModel.value.splice(itemIndex, 1)
     }
-    if (itemIndex > -1 && !allowDuplicates) {
-      clonedValue.splice(itemIndex, 1);
-    } else {
-      if (maxSelection) {
-        if (clonedValue.length < maxSelection) {
-          clonedValue.push(item);
-        } else {
-          return;
-        }
-      } else {
-        clonedValue.push(item);
-      }
+    else {
+      if (!props.maxSelection || vModel.value.length < props.maxSelection) vModel.value.push(item)
     }
-    vModel.value = clonedValue;
-  };
+  }
 
   const isActiveItem = (item) => {
-    if (multiple) {
-      return returnObject
-        ? vModel.value.some(element => _.isEqual(element, item))
-        : vModel.value.includes(items.indexOf(item))
-    }
-    return returnObject
-      ? _.isEqual(vModel.value, item)
-      : items.indexOf(item) === vModel.value
-  };
+    if (_.isNil(vModel.value)) return false // use isNil because !0 will return true
+    if (props.returnObject) item = props.items.indexOf(item)
+
+    if (props.multiple) return Array.isArray(vModel.value) && vModel.value.includes(item)
+    else return vModel.value === item
+  }
 
   return {
     toggleItem,
@@ -73,56 +53,56 @@ function groupable(props, vModel) {
 export function makeSelectable(props, context) {
   // 1 -> {a: 1, b: 2}
   const convertValueToInternalValue = function (value) {
-    if (!props.itemValue || !value) return value;
-    if (!Array.isArray(props.value)) return props.items.find(i => i[props.itemValue] === value);
-    return props.items.filter(i => value.includes(i[props.itemValue]));
+    if (!props.itemValue || !value) return value
+    if (!Array.isArray(props.value)) return props.items.find(i => i[props.itemValue] === value)
+    return props.items.filter(i => value.includes(i[props.itemValue]))
   }
 
   // {a: 1, b: 2} -> 1
   const convertInternalValueToValue = function (internalValue) {
-    if (!props.itemValue || !internalValue) return internalValue;
-    if (!Array.isArray(internalValue)) return internalValue[props.itemValue];
-    return internalValue.map(i => i[props.itemValue]);
+    if (!props.itemValue || !internalValue) return internalValue
+    if (!Array.isArray(internalValue)) return internalValue[props.itemValue]
+    return internalValue.map(i => i[props.itemValue])
   }
 
-  let rawInternalValue;
+  let rawInternalValue
   if (props.multiple && props.value && !Array.isArray(props.value)) {
-    rawInternalValue = ref([convertValueToInternalValue(props.value)]);
+    rawInternalValue = ref([convertValueToInternalValue(props.value)])
   } else if (props.multiple) {
-    rawInternalValue = ref(convertValueToInternalValue(props.value) || []);
+    rawInternalValue = ref(convertValueToInternalValue(props.value) || [])
   } else {
-    rawInternalValue = ref(convertValueToInternalValue(props.value));
+    rawInternalValue = ref(convertValueToInternalValue(props.value))
   }
 
-  let ignoreWatchValue = false;
-  let ignoreWatchInternalValue = false;
+  let ignoreWatchValue = false
+  let ignoreWatchInternalValue = false
 
   //use when props.value is change from outside
   watch(() => props.value, () => {
     if (ignoreWatchValue) {
-      return ignoreWatchValue = false;
+      return ignoreWatchValue = false
     }
 
     if (props.multiple && props.value && !Array.isArray(props.value)) {
-      rawInternalValue.value = [convertValueToInternalValue(props.value)];
+      rawInternalValue.value = [convertValueToInternalValue(props.value)]
     } else {
-      rawInternalValue.value = convertValueToInternalValue(props.value);
+      rawInternalValue.value = convertValueToInternalValue(props.value)
     }
-    ignoreWatchInternalValue = true;
-  }, { lazy: true });
+    ignoreWatchInternalValue = true
+  }, { lazy: true })
 
   watch(() => rawInternalValue.value, () => {
     if (ignoreWatchInternalValue) {
-      return ignoreWatchInternalValue = false;
+      return ignoreWatchInternalValue = false
     }
 
-    context.emit('input', convertInternalValueToValue(rawInternalValue.value));
-    ignoreWatchValue = true;
+    context.emit('input', convertInternalValueToValue(rawInternalValue.value))
+    ignoreWatchValue = true
   })
 
-  const { toggleItem, isActiveItem } = groupable(props, rawInternalValue);
+  const { toggleItem, isActiveItem } = groupable(props, rawInternalValue)
 
-  return { toggleItem, isActiveItem, internalValue: rawInternalValue };
+  return { toggleItem, isActiveItem, internalValue: rawInternalValue }
 }
 
 export default groupable

From b15b655da757787a908d1be224105af8a7c28485 Mon Sep 17 00:00:00 2001
From: Lam Phan Dang <lam.phan@gigasouce.io>
Date: Wed, 27 Nov 2019 18:52:47 +0700
Subject: [PATCH 9/9] Fix bug duplicated highlight when select identical items
 in GList

---
 .../GList/__story__/GList.stories.js          | 11 ++-
 src/mixins/groupable.js                       | 97 ++++++++-----------
 2 files changed, 52 insertions(+), 56 deletions(-)

diff --git a/src/components/GList/__story__/GList.stories.js b/src/components/GList/__story__/GList.stories.js
index 43297bed..e85fb784 100644
--- a/src/components/GList/__story__/GList.stories.js
+++ b/src/components/GList/__story__/GList.stories.js
@@ -29,6 +29,8 @@ export const gListPlayGround = () => ({
   data() {
     return {
       items: [
+        { text: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
+        { text: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
         { text: 'Jason Oner', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
         { text: 'Ranee Carlson', prepend: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
         { text: 'Cindy Baker', prepend: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
@@ -55,6 +57,7 @@ export const gListPlayGround = () => ({
     itemValue: { default: text('itemValue', '') },
     itemText: { default: text('itemText', 'text') },
     activeClass: { default: text('activeClass', '') },
+    returnObject: { default: boolean('returnObject', false) },
   },
   template:
     `
@@ -71,6 +74,10 @@ export const gListPlayGround = () => ({
         :prependType="prependType"
         :subtextWrap="subtextWrap"
         :itemText="itemText"
+        :selectable="selectable"
+        :multiple="multiple"
+        :mandatory="mandatory"
+        :returnObject="returnObject"
       />
       `,
 })
@@ -685,7 +692,7 @@ export const gListPrimitiveItems = () => ({
   components: { GDivider, GListItem, GList, GListItemIcon, GListItemAvatar, GListItemAction, GListItemImage, GListItemImageBig, GListItemContent, GListItemText, GListItemSubText, GListHeader },
   data() {
     return {
-      items: ['Jason Oner', 'Ranee Carlson', 'Cindy Baker', 'Ali Connors'],
+      items: ['Jason Oner', 'Jason Oner', 'Jason Oner', 'Ranee Carlson', 'Cindy Baker', 'Ali Connors'],
       selectedValue: null
     }
   },
@@ -728,9 +735,9 @@ export const gListPrimitiveItems = () => ({
         :subtextWrap="subtextWrap"
         :selectable="selectable"
         :multiple="multiple"
+        :mandatory="mandatory"
         allowDuplicates
         v-model="selectedValue"
-       
       />
 </div>
 
diff --git a/src/mixins/groupable.js b/src/mixins/groupable.js
index 2a34e618..39fbb235 100644
--- a/src/mixins/groupable.js
+++ b/src/mixins/groupable.js
@@ -1,73 +1,58 @@
 import _ from 'lodash'
-import { ref, watch } from '@vue/composition-api';
+import {ref, watch} from '@vue/composition-api'
 
 function groupable(props, vModel) {
   //mandatory: requires at least 1 to be active at all times, unless value is null/undefined (at init)
   //multiple: multiple items can be active at a time
   //allowDuplicate: choose one item multiple times
-  const { returnObject = true, items, mandatory, multiple, allowDuplicates, maxSelection, itemValue, itemText } = props
+  if (typeof props.returnObject === 'undefined') props.returnObject = true
+
   const toggleItem = (item) => {
-    if (multiple) {
-      if (returnObject && itemText) {
-        updateMultiple(item);
-      } else {
-        itemValue ? updateMultiple(item[itemValue]) : updateMultiple(items.indexOf(item))
-      }
+    if (props.multiple) {
+      if (props.returnObject && props.itemText) updateMultiple(item)
+      else props.itemValue ? updateMultiple(item[props.itemValue]) : updateMultiple(props.items.indexOf(item))
     } else {
-      if (returnObject && itemText) {
-        updateSingle(item);
-      } else {
-        itemValue ? updateSingle(item[itemValue]) : updateSingle(items.indexOf(item))
-      }
+      if (props.returnObject && props.itemText) updateSingle(item)
+      else props.itemValue ? updateSingle(item[props.itemValue]) : updateSingle(props.items.indexOf(item))
     }
-  };
+  }
 
   const updateSingle = (item) => {
-    const isSame = _.isEqual(vModel.value, item);
-    if (isSame && mandatory) {
-      return;
-    }
-    vModel.value = isSame ? null : item;
-  };
+    const isSame = vModel.value === item
+
+    if (isSame && props.mandatory) return
+
+    vModel.value = isSame ? null : item
+  }
 
   const updateMultiple = (item) => {
-    const clonedValue = _.clone(vModel.value);
-    const itemIndex = clonedValue.findIndex((i) => _.isEqual(i, item));
-    //item exists + mandatory
-    if (itemIndex > -1 && mandatory && clonedValue.length - 1 < 1) {
-      return;
-    }
-    if (itemIndex > -1 && !allowDuplicates) {
-      clonedValue.splice(itemIndex, 1);
+    // use isNil because !0 will return true
+    if (_.isNil(vModel.value)) vModel.value = []
+
+    const itemIndex = vModel.value.findIndex(e => e === item)
+    if (itemIndex > -1) {
+      if (props.mandatory && vModel.value.length < 2) return
+
+      if (!props.allowDuplicates) vModel.value.splice(itemIndex, 1)
     } else {
-      if (maxSelection) {
-        if (clonedValue.length < maxSelection) {
-          clonedValue.push(item);
-        } else {
-          return;
-        }
-      } else {
-        clonedValue.push(item);
-      }
+      if (!props.maxSelection || vModel.value.length < props.maxSelection) vModel.value.push(item)
     }
-    vModel.value = clonedValue;
-  };
+  }
 
   const isActiveItem = (item) => {
-    if (multiple) {
-      if (returnObject) {
-        return vModel.value.some(element => _.isEqual(element, item))
-      } else {
-        return itemValue
-          ? vModel.value.some(element => element === item[itemValue])
-          : vModel.value.includes(items.indexOf(item))
-      }
-    }
-    if (returnObject) {
-      return _.isEqual(vModel.value, item)
-    } else {
-      return itemValue ? item[itemValue] === vModel.value : items.indexOf(item) === vModel.value
-    }
+    // use isNil because !0 will return true
+    if (_.isNil(vModel.value)) return false
+
+    if (!props.returnObject) item = props.items.indexOf(item)
+
+    if (props.multiple)
+      return props.itemValue
+          ? vModel.value.includes(item[props.itemValue])
+          : vModel.value.includes(item)
+    else
+      return props.itemValue
+        ? vModel.value === item[props.itemValue]
+        : vModel.value === item
   };
 
   return {
@@ -77,7 +62,6 @@ function groupable(props, vModel) {
 }
 
 export function makeSelectable(props, context) {
-
   // 1 -> {a: 1, b: 2}
   const convertValueToInternalValue = function (value) {
     if (!props.itemValue || !value) {
@@ -118,6 +102,11 @@ export function makeSelectable(props, context) {
   let ignoreWatchValue = false;
   let ignoreWatchInternalValue = false;
 
+  watch(() => props.multiple, () => {
+    if (props.multiple) rawInternalValue.value = [];
+    else rawInternalValue.value = null;
+  }, {flush: "pre"})
+
   //use when props.value is change from outside
   watch(() => props.value, () => {
     if (ignoreWatchValue) {