diff --git a/package.json b/package.json index 01405138..c4dce3fb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@nih-sparc/sparc-design-system-components", - "version": "0.26.14", + "version": "0.26.15", "private": false, "scripts": { "serve": "vue-cli-service serve", diff --git a/src/components/DropdownMultiselect/src/DropdownMultiselect.vue b/src/components/DropdownMultiselect/src/DropdownMultiselect.vue index 7c6d5322..899cb47f 100644 --- a/src/components/DropdownMultiselect/src/DropdownMultiselect.vue +++ b/src/components/DropdownMultiselect/src/DropdownMultiselect.vue @@ -23,8 +23,8 @@ } ]" > - - + + - +Show more + + Expand
- -Show less + - Compress
@@ -65,8 +65,6 @@ import { pluck, propOr } from 'ramda' import DropdownLabel from './DropdownLabel.vue' -const tooltipDelay = 800 - export default { name: 'DropdownMultiselect', @@ -104,7 +102,7 @@ export default { treeProps: { label: 'label' }, - optionsExpanded: false, + optionsExpanded: true, numOptionsShown: 0, } }, @@ -200,46 +198,14 @@ export default { // eslint-disable-next-line no-unused-vars renderContent(h, { node, data, store }) { return ( - -
- {node.label} -
- - {node.label} - -
+ + {node.label} + ) }, // eslint-disable-next-line no-unused-vars filterNodes: function(data, node) { - if (this.visibleData === undefined) { - if (this.optionsExpanded) { return true } - if (this.numOptionsShown < 5) { - this.numOptionsShown += 1 - return true - } - return false - } - else { - if (this.showExpandOptionsContainer) { - if (this.optionsExpanded) { - return this.allVisibleDataIds.includes(node.label) - } - else { - if (this.allVisibleDataIds.includes(node.label) && this.numOptionsShown < 5) - { - this.numOptionsShown += 1 - return true - } - return false - } - } - return this.allVisibleDataIds.includes(node.label) - } + return this.visibleData === undefined ? true : this.allVisibleDataIds.includes(node.label) }, onChangeShowAll: function(value) { if (value) { @@ -355,8 +321,14 @@ export default { margin: 0.25rem 1.5rem; cursor: pointer; } -.scroll { - overflow: hidden; - max-height: 17.5rem; +::v-deep .expand { + max-height: none; + overflow-y: hidden; +} +::v-deep .minimize { + max-height: 9rem; +} +::v-deep .el-scrollbar__bar.is-vertical { + opacity: 1; }