+
{{internalValue.length}} / {{counter}}
@@ -73,9 +73,8 @@
-
-
diff --git a/src/components/GList/GListItem.vue b/src/components/GList/GListItem.vue
index 84f635a7..9406076f 100644
--- a/src/components/GList/GListItem.vue
+++ b/src/components/GList/GListItem.vue
@@ -5,16 +5,16 @@
diff --git a/src/components/GSelect/GSelectFactory.js b/src/components/GSelect/GSelectFactory.js
deleted file mode 100644
index 5b83b2d8..00000000
--- a/src/components/GSelect/GSelectFactory.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import { computed } from '@vue/composition-api';
-import _ from 'lodash';
-
-function createItemFn(prop) {
- return typeof prop === 'function'
- ? prop
- : item => {
- if (!_.isObject(item)) return item
-
- if (_.isArray(prop)) {
- const key = prop.find(Object.keys(item).includes)
- return item[key]
- } else {
- return item[prop]
- }
- }
-}
-
-const listMultipleFilter = (props, selectedValue) => {
- const itemValueFn = computed(() => createItemFn(props.itemValue))
- const itemTextFn = computed(() => createItemFn(props.itemText))
-
- let _options
- if (!selectedValue.value) {
- return _options = props.items
- }
- if (props.allowDuplicates) {
- _options = props.items;
- } else {
- if (props.returnObject) {
- _options = props.items.filter(item => !selectedValue.value.find(_selectedValue => itemTextFn.value(_selectedValue) === itemTextFn.value(item)));
- } else {
- if (props.itemValue) {
- _options = props.items.filter(item => !selectedValue.value.find(el => el === itemValueFn.value(item)))
- } else {
- _options = props.items.filter(item => !(selectedValue.value.includes(item)))
- }
- }
- }
- return _options
-}
-
-const searchTextFilteredItems = (props, state, items) => {
- const itemTextFn = computed(() => createItemFn(props.itemText))
-
- if (!state.searchText || !state.searchText.trim()) {
- return items;
- }
- if (items === null) {
- return
- }
- // normalize search text if used in g-select
- const searchText = !props.filter ? state.searchText.trim().toLowerCase() : state.searchText.trim();
- //match searchText
- let _filteredOptions
- if (!props.filter) {
- let _searchedOptions = items.filter(item => {
- const text = itemTextFn.value(item) ? (itemTextFn.value(item) + "").toLowerCase() : (item + "").toLowerCase();
- return text.startsWith(searchText);
- });
- _filteredOptions = _searchedOptions.concat(items.filter(item => {
- const text = itemTextFn.value(item) ? (itemTextFn.value(item) + "").toLowerCase() : (item + "").toLowerCase();
- return !text.startsWith(searchText) && text.includes(searchText);
- }));
- }
- //use props.filter to filter items
- else if (typeof props.filter === 'function') {
- _filteredOptions = items.filter(item => props.filter(itemTextFn.value(item), searchText))
- }
- return _filteredOptions
-}
-
-export function getList(props, selectedValue, state) {
- return computed(() => {
- if (props.multiple) {
- let options = listMultipleFilter(props, selectedValue)
-
- if (props.searchable) {
- let items = _.cloneDeep(options);
- return searchTextFilteredItems(props, state, items)
- }
- return options
- }
- if (props.searchable) return searchTextFilteredItems(props, state, _.cloneDeep(props.items))
- return props.items
- })
-}
-
-
-//selectedValue : primitive array --> return item itself,
-//selectedValue: primitive array of value --> return item have value
-//selectedValue: object array --> return item match
-//then normalise item in form {text:, value:}
-export function getSelections(props, selectedValue) {
- const itemTextFn = computed(() => createItemFn(props.itemText))
- const itemValueFn = computed(() => createItemFn(props.itemValue))
-
- const isObjectList = props.items.some(item => _.isObject(item) === true)
- return computed(() => {
- if (!props.multiple) {
- let item = selectedValue.value;
- if (!item && item !== 0) return null;
- if (!isObjectList) return item;
- if (props.itemValue && !props.returnObject) item = props.items.find(_item => itemValueFn.value(_item) === item);
- //TODO: temporary fix, needs optimizing, Function in selectedValue is converted to Object -> _.equal doesn't work
- else item = props.items.find(_item => itemTextFn.value(_item) === itemTextFn.value(item))
- return item ? {text: itemTextFn.value(item), value: itemValueFn.value(item)} : '';
- }
- const list = selectedValue.value
- if (!isObjectList) return list.map(item => props.items.find(el => el === item))
- if (props.returnObject) {
- if (props.itemValue) return list.map(item => ({text: itemTextFn.value(item), value: itemValueFn.value(item)}))
- return list.map(item => props.items.find(el => _.isEqual(el, item)))
- } else if (props.itemValue) return list.map(item => props.items.find(el => itemValueFn.value(el) === item))
- return list.map(item => props.items.find(el => _.isEqual(el, item)))
- })
-}
-
-//same as getSelection but accept selections not in list
-export function getSelectionsForCombobox(props, selectedValue) {
- const itemTextFn = computed(() => createItemFn(props.itemText))
- const itemValueFn = computed(() => createItemFn(props.itemValue))
-
- if (props.items === null || props.items.length === 0) {
- let empty = props.multiple ? [] : ''
- return selectedValue.value || empty
- }
- const isObjectList = props.items.some(item => _.isObject(item) === true)
- if (!props.multiple) {
- let item = selectedValue.value;
- if (!item && item !== 0) return null
- if (!isObjectList) return item;
- if (props.itemValue && !props.returnObject) {
- item = props.items.find(_item => itemValueFn.value(_item) === item) || item
- } else item = props.items.find(_item => _.isEqual(item, _item)) || item
- return item ? {text: itemTextFn.value(item), value: itemValueFn.value(item)} : ''
- } else {
- const list = selectedValue.value || []
- if (!isObjectList) return list
- if (props.returnObject) {
- if (props.itemValue) return list.map(item => itemValueFn.value(item) ? {
- text: itemTextFn.value(item),
- value: itemValueFn.value(item)
- } : item)
- return list
- } else if (props.itemValue) return list.map(item => props.items.find(el => itemValueFn.value(el) === item) || item)
- return list
- }
-
-}
diff --git a/src/components/GSelect/__story__/GSelect.stories.js b/src/components/GSelect/__story__/GSelect.stories.js
index 078555ac..6fb054f8 100644
--- a/src/components/GSelect/__story__/GSelect.stories.js
+++ b/src/components/GSelect/__story__/GSelect.stories.js
@@ -1,5 +1,9 @@
-import {boolean, number, text, withKnobs} from '@storybook/addon-knobs';
-import {action} from '@storybook/addon-actions'
+import { boolean, number, text, withKnobs } from '@storybook/addon-knobs';
+// testing
+import Vue from 'vue/dist/vue.common.js'
+import GListItem from '../../GList/GListItem';
+import { GListItemContent, GListItemText } from '../../GList/GListFunctionalComponent';
+import GSelect from '../GSelect';
//
export default {
@@ -23,7 +27,7 @@ export const GSelectSingle = () => ({
persistent: {default: boolean('persistent', false)},
counter: {type: [String, Number], default: number('counter', 25)},
itemText: {default: text('itemText', 'text')},
- itemValue: {default: text('itemValue', 'value')},
+ itemValue: {default: text('itemValue', '')},
chips: {default: boolean('chips', false)},
smallChips: {default: boolean('smallChips', false)},
mandatory: {default: boolean('mandatory', false)},
@@ -37,7 +41,7 @@ export const GSelectSingle = () => ({
{text: 'Cindy Baker', value: 'https://cdn.vuetifyjs.com/images/lists/3.jpg'},
{text: 'Ali Connors', value: 'https://cdn.vuetifyjs.com/images/lists/4.jpg'},
],
- selected: 'https://cdn.vuetifyjs.com/images/lists/1.jpg'
+ selected: {text: 'Jason Oner', value: 'https://cdn.vuetifyjs.com/images/lists/1.jpg'}
}
},
template: `
@@ -132,20 +136,20 @@ export const GSelectMultiple = () => ({
allowDuplicates: {type: Boolean, default: boolean('allow duplicates', false)},
chips: {default: boolean('chips', false)},
itemText: {default: text('itemText', 'text')},
- itemValue: {default: text('itemValue', 'value')},
+ itemValue: {default: text('itemValue', 'value2')},
clearable: {default: boolean('clearable', false)},
- returnObject: {default: boolean('returnObject', true)}
+ returnObject: {default: boolean('returnObject', false)}
},
data() {
return {
items: [
- {text: 'Jason Oner', value: 'https://cdn.vuetifyjs.com/images/lists/1.jpg'},
- {text: 'Ranee Carlson', value: 'https://cdn.vuetifyjs.com/images/lists/2.jpg'},
- {text: 'Cindy Baker', value: 'https://cdn.vuetifyjs.com/images/lists/3.jpg'},
- {text: 'Ali Connors', value: 'https://cdn.vuetifyjs.com/images/lists/4.jpg'},
+ {text: 'Jason Oner', value2: 'https://cdn.vuetifyjs.com/images/lists/1.jpg'},
+ {text: 'Ranee Carlson', value2: 'https://cdn.vuetifyjs.com/images/lists/2.jpg'},
+ {text: 'Cindy Baker', value2: 'https://cdn.vuetifyjs.com/images/lists/3.jpg'},
+ {text: 'Ali Connors', value2: 'https://cdn.vuetifyjs.com/images/lists/4.jpg'},
],
- selected: [ {text: 'Jason Oner', value: 'https://cdn.vuetifyjs.com/images/lists/1.jpg'},
- {text: 'Ranee Carlson', value: 'https://cdn.vuetifyjs.com/images/lists/2.jpg'},]
+ selected: [ {text: 'Jason Oner', value2: 'https://cdn.vuetifyjs.com/images/lists/1.jpg'},
+ {text: 'Ranee Carlson', value2: 'https://cdn.vuetifyjs.com/images/lists/2.jpg'},]
}
},
template: `
@@ -223,10 +227,10 @@ export const GSelectSearchableSingleSelect = () => ({
data() {
return {
items: [
- {text: 'Jason Oner', value: 'https://cdn.vuetifyjs.com/images/lists/2.jpg'},
- {text: 'Ranee Carlson', value: 'https://cdn.vuetifyjs.com/images/lists/2.jpg'},
- {text: 'Cindy Baker', value: 'https://cdn.vuetifyjs.com/images/lists/3.jpg'},
- {text: 'Ali Connors', value: 'https://cdn.vuetifyjs.com/images/lists/4.jpg'},
+ 'Jason Oner',
+ 'Ranee Carlson',
+ 'Cindy Baker',
+ 'Ali Connors',
],
selected: null
}
@@ -429,16 +433,6 @@ export const test2 = () => ({
}
})
-// testing
-import Vue from 'vue/dist/vue.common.js'
-
-import GCheckbox from "../../GCheckbox/GCheckbox";
-import GTextField from "../../GInput/GTextField";
-import GListItem from "../../GList/GListItem";
-import {GListItemText, GListItemContent, GListItemSubText} from "../../GList/GListFunctionalComponent";
-import GDivider from "../../GLayout/GDivider";
-import GSelect from "../GSelect";
-
describe('test', function () {
it('should', function () {
const vm = new Vue(test1()).$mount();