diff --git a/js/components/selector.js b/js/components/selector.js index 15c60076..4e599494 100644 --- a/js/components/selector.js +++ b/js/components/selector.js @@ -1,10 +1,46 @@ import { VPopover } from 'v-tooltip' +const SelectorInput = { + name: 'SelectorInput', + props: { + name: String, + value: String, + label: String, + description: String, + selected: Boolean, + handleChange: Function, + handleEnter: Function, + handleEsc: Function + }, + + computed: { + id: function () { + return `${this.name}_${this.value}` + } + }, + + methods: { + onChange: function (e) { + this.handleChange(this.value) + }, + + onEnter: function (e) { + this.handleEnter() + }, + + onEsc: function (e) { + this.handleEsc() + } + } +} + + export default { name: 'selector', components: { - VPopover + VPopover, + SelectorInput }, props: { @@ -20,7 +56,9 @@ export default { data: function () { return { value: this.initialChoice || null, - showError: (this.initialErrors && this.initialErrors.length) || false + currentChoice: this.initialChoice || null, + showError: (this.initialErrors && this.initialErrors.length) || false, + usingKeyboard: false } }, @@ -38,10 +76,38 @@ export default { }, methods: { - change: function (e) { - this.value = e.target.value + + change: function (value) { + this.value = value this.showError = false - setTimeout(() => this.$refs.popover.hide(), 300) + }, + + onShow: function () { + setTimeout(() => { // timeout is a hack to make focus work in Chrome + this.$refs.choices.find(choice => choice.selected).$refs.input[0].focus() + }, 100) + }, + + enter: function () { + this.$refs.popover.hide() + }, + + esc: function () { + this.value = this.currentChoice + this.usingKeyboard = false + this.$refs.popover.hide() + }, + + handleEnterOption: function (e) { + this.change(e.target.value) + this.currentChoice = e.target.value + this.usingKeyboard = false + this.$refs.popover.hide() + }, + + handleButtonArrowDown: function (e) { + this.usingKeyboard = true + this.$refs.popover.show() } }, } diff --git a/styles/elements/_block_lists.scss b/styles/elements/_block_lists.scss index cba9edad..bfe1d0e3 100644 --- a/styles/elements/_block_lists.scss +++ b/styles/elements/_block_lists.scss @@ -68,6 +68,24 @@ } } +@mixin block-list-selectable-label { + margin: 0; + max-width: 100%; + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: space-between; + &::before { + flex-shrink: 0; + margin-right: 0; + margin-left: $gap * 2; + } + + &:hover { + color: $color-primary; + } +} + .block-list { @include block-list; @@ -105,24 +123,23 @@ @include block-list-item; &.block-list__item--selectable { - > label { - margin: 0; - max-width: none; + > div { display: flex; flex-direction: row-reverse; - align-items: center; - justify-content: space-between; - &::before { - flex-shrink: 0; - margin-right: 0; - margin-left: $gap * 2; + + @include ie-only { + width: 100%; } - &:hover { - color: $color-primary; + > label { + @include block-list-selectable-label; } } + > label { + @include block-list-selectable-label; + } + input:checked { + label { color: $color-primary; diff --git a/templates/components/selector.html b/templates/components/selector.html index fb81b446..439ca277 100644 --- a/templates/components/selector.html +++ b/templates/components/selector.html @@ -11,7 +11,7 @@ inline-template>
- +
{{ field.label | striptags }}
@@ -22,7 +22,14 @@ {{ Icon('alert',classes="icon-validation") }}
- + {{ Icon('alert',classes="icon-validation") }} @@ -35,23 +42,48 @@