Just current state, not yet usable
This commit is contained in:
parent
7057722772
commit
d7c469956e
5
package-lock.json
generated
5
package-lock.json
generated
|
@ -11689,6 +11689,11 @@
|
|||
"integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
|
||||
"dev": true
|
||||
},
|
||||
"tabbable": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-4.0.0.tgz",
|
||||
"integrity": "sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ=="
|
||||
},
|
||||
"table": {
|
||||
"version": "5.4.6",
|
||||
"resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
|
||||
|
|
|
@ -42,7 +42,8 @@
|
|||
"v-clipboard": "^2.2.3",
|
||||
"vue": "^2.6.11",
|
||||
"vue-router": "^3.3.4",
|
||||
"vuedraggable": "^2.23.2"
|
||||
"vuedraggable": "^2.23.2",
|
||||
"tabbable": "^4.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"extends @nextcloud/browserslist-config"
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
@keydown.enter.prevent="addNewEntry">
|
||||
|
||||
<!-- Delete answer -->
|
||||
<Actions>
|
||||
<Actions @keydown.tab.exact.prevent="onActionsTab">
|
||||
<ActionButton icon="icon-close" @click="deleteEntry">
|
||||
{{ t('forms', 'Delete answer') }}
|
||||
</ActionButton>
|
||||
|
@ -79,6 +79,11 @@ export default {
|
|||
this.$refs.input.focus()
|
||||
},
|
||||
|
||||
onActionsTab(event) {
|
||||
console.debug('keydownTab')
|
||||
// this.$emit('focus-next', event.target)
|
||||
},
|
||||
|
||||
/**
|
||||
* Option changed, processing the data
|
||||
*/
|
||||
|
|
|
@ -46,7 +46,7 @@
|
|||
:maxlength="maxQuestionLength"
|
||||
required
|
||||
@input="onTitleChange"
|
||||
@keydown.shift.tab.capture="nextDisableEdit">
|
||||
@keydown.shift.tab.prevent="onTitleShiftTab">
|
||||
<h3 v-else
|
||||
class="question__header-title"
|
||||
:tabindex="computedTitleTabIndex"
|
||||
|
@ -56,7 +56,10 @@
|
|||
v-tooltip.auto="warningInvalid"
|
||||
class="question__header-warning icon-error-color"
|
||||
tabindex="0" />
|
||||
<Actions v-if="!readOnly" class="question__header-menu" :force-menu="true">
|
||||
<Actions v-if="!readOnly"
|
||||
class="question__header-menu"
|
||||
:force-menu="true"
|
||||
@keydown.tab.exact.prevent="onActionsTab">
|
||||
<ActionCheckbox :checked="mandatory"
|
||||
@update:checked="onMandatoryChange">
|
||||
{{ t('forms', 'Required') }}
|
||||
|
@ -167,6 +170,16 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
onTitleShiftTab(event) {
|
||||
console.debug('this', event.target)
|
||||
this.$emit('focus-prev', event.target)
|
||||
this.disableEdit()
|
||||
},
|
||||
onActionsTab(event) {
|
||||
console.debug('actionsTab', event)
|
||||
this.$emit('focus-next', event.target)
|
||||
},
|
||||
|
||||
onTitleChange({ target }) {
|
||||
this.$emit('update:text', target.value)
|
||||
},
|
||||
|
@ -179,12 +192,9 @@ export default {
|
|||
* Allow edit-navigation through Tab-Key
|
||||
*/
|
||||
onTitleFocus() {
|
||||
console.debug('On Title focus', this.$refs)
|
||||
if (!this.readOnly) {
|
||||
this.enableEdit()
|
||||
console.debug('Store NextTick')
|
||||
this.$nextTick(() => {
|
||||
console.debug('NextTick!')
|
||||
this.$refs.titleInput.focus()
|
||||
})
|
||||
}
|
||||
|
@ -210,18 +220,6 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
nextDisableEdit(event) {
|
||||
console.debug('nextDisable')
|
||||
console.debug(event)
|
||||
// event.preventDefault()
|
||||
// this.disableEdit()
|
||||
this.$nextTick(() => {
|
||||
console.debug('Later!')
|
||||
})
|
||||
console.debug('trigger')
|
||||
// this.disableEdit()
|
||||
},
|
||||
|
||||
/**
|
||||
* Delete this question
|
||||
*/
|
||||
|
|
|
@ -32,7 +32,9 @@
|
|||
:warning-invalid="answerType.warningInvalid"
|
||||
@update:text="onTitleChange"
|
||||
@update:mandatory="onMandatoryChange"
|
||||
@delete="onDelete">
|
||||
@delete="onDelete"
|
||||
@focus-prev="onFocusPrev"
|
||||
@focus-next="FocusNextOutside">
|
||||
<div class="question__content">
|
||||
<textarea ref="textarea"
|
||||
:aria-label="t('forms', 'A long answer for the question “{text}”', { text })"
|
||||
|
|
|
@ -34,7 +34,9 @@
|
|||
:shift-drag-handle="shiftDragHandle"
|
||||
@update:text="onTitleChange"
|
||||
@update:mandatory="onMandatoryChange"
|
||||
@delete="onDelete">
|
||||
@delete="onDelete"
|
||||
@focus-prev="onFocusPrev"
|
||||
@focus-next="onFocusNext">
|
||||
<ul class="question__content">
|
||||
<template v-for="(answer, index) in options">
|
||||
<li v-if="!edit"
|
||||
|
@ -72,7 +74,8 @@
|
|||
:max-option-length="maxStringLengths.optionText"
|
||||
@add="addNewEntry"
|
||||
@delete="deleteOption"
|
||||
@update:answer="updateAnswer" />
|
||||
@update:answer="updateAnswer"
|
||||
@focus-next="onFocusNext" />
|
||||
</template>
|
||||
|
||||
<li v-if="(edit && !isLastEmpty) || hasNoAnswer" class="question__item">
|
||||
|
|
|
@ -32,7 +32,10 @@
|
|||
:warning-invalid="answerType.warningInvalid"
|
||||
@update:text="onTitleChange"
|
||||
@update:mandatory="onMandatoryChange"
|
||||
@delete="onDelete">
|
||||
@delete="onDelete"
|
||||
@focus-prev="onFocusPrev"
|
||||
@focus-next="FocusNextOutside"
|
||||
@keydown.tab.exact="onKeydownTab">
|
||||
<div class="question__content">
|
||||
<input ref="input"
|
||||
:aria-label="t('forms', 'A short answer for the question “{text}”', { text })"
|
||||
|
|
|
@ -22,6 +22,7 @@ import { debounce } from 'debounce'
|
|||
import { generateUrl } from '@nextcloud/router'
|
||||
import { showError } from '@nextcloud/dialogs'
|
||||
import axios from '@nextcloud/axios'
|
||||
import tabbable from 'tabbable'
|
||||
|
||||
import Question from '../components/Questions/Question'
|
||||
|
||||
|
@ -201,5 +202,22 @@ export default {
|
|||
this.edit = false
|
||||
}
|
||||
},
|
||||
|
||||
onFocusPrev(elem) {
|
||||
console.debug('TabPrev Mixin', elem)
|
||||
this.$emit('focus-prev', elem)
|
||||
},
|
||||
onFocusNext(elem) {
|
||||
console.debug('TabNext', elem)
|
||||
this.$emit('focus-next', elem)
|
||||
},
|
||||
FocusNextOutside(elem) {
|
||||
console.debug('focusnextoutside', elem)
|
||||
this.$emit('focus-next', elem)
|
||||
this.disableEdit()
|
||||
},
|
||||
onKeydownTab(event) {
|
||||
console.debug('keydownTab')
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
@ -94,7 +94,9 @@
|
|||
:index="index + 1"
|
||||
:max-string-lengths="maxStringLengths"
|
||||
v-bind.sync="question"
|
||||
@delete="deleteQuestion(question)" />
|
||||
@delete="deleteQuestion(question)"
|
||||
@focus-prev="onFocusPrev"
|
||||
@focus-next="onFocusNext" />
|
||||
</Draggable>
|
||||
|
||||
<!-- Add new questions toolbar -->
|
||||
|
@ -126,6 +128,7 @@ import { loadState } from '@nextcloud/initial-state'
|
|||
import { showError } from '@nextcloud/dialogs'
|
||||
import axios from '@nextcloud/axios'
|
||||
import debounce from 'debounce'
|
||||
import tabbable from 'tabbable'
|
||||
import Draggable from 'vuedraggable'
|
||||
|
||||
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
|
||||
|
@ -230,6 +233,22 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
onFocusPrev(elem) {
|
||||
console.debug('Create tabPrev', elem)
|
||||
const tabelements = tabbable(this.$el)
|
||||
console.debug(tabelements)
|
||||
const ind = tabelements.findIndex(tabbableElement => tabbableElement === elem)
|
||||
console.debug(tabelements[ind - 1])
|
||||
tabelements[ind - 1].focus()
|
||||
},
|
||||
onFocusNext(elem) {
|
||||
console.debug('Create tabNext', elem)
|
||||
const tabelements = tabbable(this.$el)
|
||||
console.debug(tabelements)
|
||||
const ind = tabelements.findIndex(tabbableElement => tabbableElement === elem)
|
||||
console.debug(tabelements[ind + 1])
|
||||
tabelements[ind + 1].focus()
|
||||
},
|
||||
/**
|
||||
* Fetch the full form data and update parent
|
||||
*
|
||||
|
|
Loading…
Reference in a new issue