Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: avoid reactive variables to trigger themselves #61

Merged
merged 6 commits into from
Nov 28, 2022
Merged

fix: avoid reactive variables to trigger themselves #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
75c9506
fix: avoid reactive variables to trigger themselves
Nov 23, 2022
8fbee57
docs: adapt readme to small prop changes
Nov 23, 2022
53d1d0b
fix: fix if condition, so optionValues can be arrays in single mode
Nov 23, 2022
ddfc5d0
test: add array as value for some options
Nov 23, 2022
25e8d55
chore: add selected Options as possible dependency for optionLabel again
Nov 28, 2022
3181132
docs: adapt readme to changes
Nov 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
## Installation

```bash
npm install @singularit/multiselect@beta
npm install @singularit/multiselect
```


Expand All @@ -27,14 +27,14 @@ npm install @singularit/multiselect@beta
| **selectOptions** | `array` | `[]` | Array of options that can be selected. An option should look like this: `{value: ..., label: '...', ...}`. |
| **placeholder** | `string` | `''` | The placeholder string will be displayed if no option is selected. |
| **optionLabel** | `function` | | Function that determines which attribute of the option object should be displayed as label. The passed parameters are an option and an array of all selected options. By default, it returns the label attribute of the passed option. |
| **optionValue** | `function` | | Function that determines which attribute of the option object should be used as value. The passed parameters are an option and an array of all selected options. By default, it returns the value attribute of the passed option. |
| **optionValue** | `function` | | Function that determines which attribute of the option object should be used as value. Passes an option as parameter. By default, it returns the value attribute of the passed option. |
| **optionDisabled** | `function` | | Function which determines if an option is disabled. The passed parameters are an option and an array of all selected options. By default, it returns the disabled attribute of the passed option. |
| **displaySelectedValues** | <code>function&#124;string</code> | | Determines what is displayed in the value display. Can be a string or a function returning a string. The passed parameter of the function is an array of all selected options. By default the amount of selected options will be displayed in multiselect and the `optionValue` of an option in single select. |
| **clearable** | `boolean` | `true` | Whether all selected options can be cleared. |
| **disabled** | `boolean` | `false` | Disables the component. Values can still be pushed into the model value externally. |
| **searchable** | `boolean` | `false` | Whether options can be searched. |
| **searchProps** | `object` | | Allows passing HTML input attributes to the search input element. |
| **optionSearchValue** | `function` | | Determines which value of the option Object is searched.It is a function which returns the value of an option that is tracked by the search input.The passed parameters are an option and an array of all selected options.By default, it returns the label of the passed option. |
| **optionSearchValue** | `function` | | Determines which value of the option Object is searched. It is a function which returns the value of an option that is tracked by the search input. Passes an option as parameter. By default, it returns the label of the passed option. |
| **selectProps** | `object` | | Allows passing HTML select attributes to the hidden select element. |
| **closeOnSelect** | `boolean` | `false` | Whether the selection dropdown should automatically be closed after selecting/deselection an option. |
| **noOptionsText** | `string` | `'Die Liste ist leer'` | Text that is displayed if no options are given. |
Expand Down
8 changes: 4 additions & 4 deletions src/Multiselect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
>
<li
v-for="(option) in shownOptions"
:key="optionValue(option,selectedOptions)"
:key="optionValue(option)"
:class="classList.option(option)"
data-cy="option"
@click="handleOptionClick(option)"
Expand All @@ -77,7 +77,7 @@
:option="option"
name="option-label"
>
<span data-cy="option-label">{{ optionLabel(option,selectedOptions) }}</span>
<span data-cy="option-label">{{ optionLabel(option) }}</span>
</slot>
</li>
</ul>
Expand Down Expand Up @@ -189,7 +189,7 @@ export default defineComponent({
* By default, it returns the value attribute of the passed option.
*/
optionValue: {
type: Function as PropType<((option: Option | unknown, selectedOptions: Array<Option | unknown>) => unknown)>,
type: Function as PropType<(option: Option | unknown) => unknown>,
required: false,
default: (option: Option | unknown) => {
if (option)
Expand Down Expand Up @@ -299,7 +299,7 @@ export default defineComponent({
* By default, it returns the label of the passed option.
*/
optionSearchValue: {
type: Function as PropType<((option: Option | unknown, selectedOptions: Array<Option | unknown>) => string)>,
type: Function as PropType<((option: Option | unknown) => string)>,
required: false,
default: (option: Option | unknown) => {
if (option)
Expand Down
28 changes: 14 additions & 14 deletions src/tests/multiselect.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ describe('Multiselect Component', () => {
})

it('should work as select input for single selections', () => {
const selectOptions = [{value: {abc: 'xyz', test: {xyz: 3}}, label: 'This'}, {value: 0, label: 'is'}, {value: 'haha', label: 'a'}, {value: 4, label: 'test'}]
const selectOptions = [{value: {abc: 'xyz', test: {xyz: 3}}, label: 'This'}, {value: 0, label: 'is'}, {value: 'lol', label: 'a'}, {value: ['list', 'value', 'haha'], label: 'test'}]

cy.mount(MultiselectTester, {
props: {
Expand All @@ -34,12 +34,12 @@ describe('Multiselect Component', () => {
cy.get('[data-cy="dropdown"]').should('be.visible')
cy.get('[data-cy="option"]').eq(3).click()
cy.get('[data-cy="value-display"]').contains('test')
cy.get('[data-cy="selected"]').contains('4')
cy.get('[data-cy="selected"]').should('contain.text','[\n "list",\n "value",\n "haha"\n]')
cy.get('[data-cy="option"]').eq(0).click()
cy.get('[data-cy="value-display"]').contains('This')
cy.get('[data-cy="value-display"]').should('not.contain', 'test')
cy.get('[data-cy="selected"]').contains('{ \"abc\": \"xyz\", \"test\": { \"xyz\": 3 } }')
cy.get('[data-cy="selected"]').should('not.contain', 4)
cy.get('[data-cy="selected"]').should('not.contain.text', '[\n "list",\n "value",\n "haha"\n]')
cy.get('[data-cy="clear"]').click()
cy.get('[data-cy="value-display"]').should('not.exist')
cy.get('[data-cy="dropdown"]').should('not.be.visible')
Expand All @@ -62,7 +62,7 @@ describe('Multiselect Component', () => {
})

it('should work as select input for multiple selections', () => {
const selectOptions = [{value: {abc: 'xyz', test: {xyz: 3}}, label: 'This'}, {value: 0, label: 'is'}, {value: 'haha', label: 'a'}, {value: 4, label: 'test'}]
const selectOptions = [{value: {abc: 'xyz', test: {xyz: 3}}, label: 'This'}, {value: 0, label: 'is'}, {value: 'lol', label: 'a'}, {value: ['list', 'value', 'haha'], label: 'test'}]
cy.mount(MultiselectTester, {
props: {
vModel: true,
Expand All @@ -77,25 +77,25 @@ describe('Multiselect Component', () => {
cy.get('[data-cy="dropdown"]').should('be.visible')
cy.get('[data-cy="option"]').eq(3).click()
cy.get('[data-cy="value-display"]').contains('1 Option gewählt')
cy.get('[data-cy="selected"]').contains(4)
cy.get('[data-cy="selected"]').should('contain.text','[\n "list",\n "value",\n "haha"\n]')
cy.get('[data-cy="option"]').eq(2).click()
cy.get('[data-cy="value-display"]').contains('2 Optionen gewählt')
cy.get('[data-cy="selected"]').contains(4)
cy.get('[data-cy="selected"]').contains('haha')
cy.get('[data-cy="selected"]').should('contain.text','[\n "list",\n "value",\n "haha"\n]')
cy.get('[data-cy="selected"]').contains('lol')
cy.get('[data-cy="option"]').eq(0).click()
cy.get('[data-cy="value-display"]').contains('3 Optionen gewählt')
cy.get('[data-cy="selected"]').contains(4)
cy.get('[data-cy="selected"]').contains('haha')
cy.get('[data-cy="selected"]').should('contain.text','[\n "list",\n "value",\n "haha"\n]')
cy.get('[data-cy="selected"]').contains('lol')
cy.get('[data-cy="selected"]').contains('{ "abc": "xyz", "test": { "xyz": 3 } }')
cy.get('[data-cy="option"]').eq(1).click()
cy.get('[data-cy="value-display"]').contains('4 Optionen gewählt')
cy.get('[data-cy="selected"]').contains(4)
cy.get('[data-cy="selected"]').contains('haha')
cy.get('[data-cy="selected"]').should('contain.text','[\n "list",\n "value",\n "haha"\n]')
cy.get('[data-cy="selected"]').contains('lol')
cy.get('[data-cy="selected"]').contains('{ "abc": "xyz", "test": { "xyz": 3 } }')
cy.get('[data-cy="selected"]').contains(0)
cy.get('[data-cy="option"]').eq(2).click()
cy.get('[data-cy="value-display"]').contains('3 Optionen gewählt')
cy.get('[data-cy="selected"]').should('not.contain', 'haha')
cy.get('[data-cy="selected"]').should('not.contain', 'lol')
cy.get('[data-cy="clear"]').click()
cy.get('[data-cy="value-display"]').should('not.exist')
cy.get('[data-cy="dropdown"]').should('not.be.visible')
Expand All @@ -112,7 +112,7 @@ describe('Multiselect Component', () => {
})

it('should be possible to just set the modelValue externally in multiple mode', () => {
const selectOptions = [{value: {abc: 'xyz', test: {xyz: 3}}, label: 'This'}, {value: 0, label: 'is'}, {value: 'haha', label: 'a'}, {value: 4, label: 'test'}]
const selectOptions = [{value: {abc: 'xyz', test: {xyz: 3}}, label: 'This'}, {value: 0, label: 'is'}, {value: 'lol', label: 'a'}, {value: ['list', 'value', 'haha'], label: 'test'}]
cy.mount(MultiselectTester, {
props: {
vModel: true,
Expand All @@ -125,7 +125,7 @@ describe('Multiselect Component', () => {
cy.get('[data-cy="dropdown"]').should('be.visible')
cy.get('[data-cy="option"]').eq(3).click()
cy.get('[data-cy="value-display"]').contains('1 Option gewählt')
cy.get('[data-cy="selected"]').contains(4)
cy.get('[data-cy="selected"]').should('contain.text','[\n "list",\n "value",\n "haha"\n]')
cy.get('[data-cy="multiselect"]').click()
cy.get('[data-cy="dropdown"]').should('not.be.visible')
cy.get('[data-cy="pushButton"]').click()
Expand Down
33 changes: 20 additions & 13 deletions src/utils/useOptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ export default function useOptions(multiple: Ref<boolean>,
closeOnSelect: Ref<boolean>,
selectOptions: Ref<Array<Option | unknown>>,
displaySelectedValues: Ref<((options: Array<Option | unknown>) => string) | string | undefined>,
optionValue: Ref<(option: Option | unknown, selectedOptions: Array<Option | unknown>) => unknown>,
optionValue: Ref<(option: Option | unknown) => unknown>,
optionLabel: Ref<(option: Option | unknown, selectedOptions: Array<Option | unknown>) => string>,
optionDisabled: Ref<(option: Option | unknown, selectedOptions: Array<Option | unknown>) => boolean>,
optionSearchValue: Ref<(option: Option | unknown, selectedOptions: Array<Option | unknown>) => string>,
optionSearchValue: Ref<(option: Option | unknown) => string>,
infinite: Ref<boolean>,
context: SetupContext,
deactivate: () => void,
Expand All @@ -20,39 +20,43 @@ export default function useOptions(multiple: Ref<boolean>,

const optionMap = computed<Map<string, Option | unknown>>(() => {
const map = new Map<string, Option | unknown>()
selectedOptionsRef.value = _.uniq(selectedOptionsRef.value)
selectOptions.value.forEach((option: Option | unknown) => {
const valueString = JSON.stringify(optionValue.value(option, selectedOptionsRef.value))
const valueString = JSON.stringify(optionValue.value(option))
map.set(valueString, option)
})
return map
})

function isSelected(option: Option | unknown) {
return selectedOptionsRef.value.some((selectedOption) => {
return _.isEqual(optionValue.value(selectedOption, selectedOptionsRef.value), optionValue.value(option, selectedOptionsRef.value))
return _.isEqual(optionValue.value(selectedOption), optionValue.value(option))
})
}

const tempValue = ref<Array<unknown> | unknown>()

function updateModelValue(options: Array<Option | unknown>) {
let value
if (multiple.value) {
value = []
value = [] as Array<unknown>
options.forEach((option) => {
value.push(optionValue.value(option, options))
value.push(optionValue.value(option))
})
tempValue.value = [...value]
}
else {
value = null
if (options.length > 0)
value = optionValue.value(options[0], options)
value = optionValue.value(options[0])
tempValue.value = value
}
context.emit('update:modelValue', value)
}

const selectedOptions = computed<Array<Option | unknown>>({
get() {
selectedOptionsRef.value = _.uniq(selectedOptionsRef.value)
if (selectedOptionsRef.value.length !== _.uniq(selectedOptionsRef.value).length)
selectedOptionsRef.value = _.uniq(selectedOptionsRef.value)
return selectedOptionsRef.value
},
set(values) {
Expand Down Expand Up @@ -82,7 +86,7 @@ export default function useOptions(multiple: Ref<boolean>,
// keeps remembered Option
else {
const rememberedOption = selectedOptionsRef.value.find((selectedOption) => {
return _.isEqual(value, optionValue.value(selectedOption, selectedOptionsRef.value))
return _.isEqual(value, optionValue.value(selectedOption))
})
correctOptions.push(rememberedOption)
}
Expand All @@ -102,18 +106,21 @@ export default function useOptions(multiple: Ref<boolean>,
const shownOptions = computed<Array<Option | unknown>>(() => {
if (!infinite.value && search && search.value) {
return (selectOptions.value as Option[]).filter((option: Option | unknown) => {
return optionSearchValue.value(option, selectedOptions.value).toLowerCase().includes(search.value.toLowerCase())
return optionSearchValue.value(option).toString().toLowerCase().includes(search.value.toLowerCase())
})
}
return selectOptions.value
})

const noOptions = computed(() => selectOptions.value.length === 0)
const noOptions = computed(() => !(infinite.value && search && search.value) && selectOptions.value.length === 0)

const noResults = computed(() => search && search.value && shownOptions.value && shownOptions.value.length === 0)

watch(() => modelValue.value, (value) => {
selectedOptions.value = _.isArray(value) ? value : [value]
if (!_.isEqual(value, tempValue.value)) {
tempValue.value = multiple.value ? [...value] : value
selectedOptions.value = multiple.value ? value : value !== undefined ? [value] : []
}
}, {deep: true})

watch(optionMap, (newMap, oldMap) => {
Expand Down